html svg 模式作为路径笔划的画笔答案

【问题标题】：html svg pattern as brush from path strokehtml svg 模式作为路径笔划的画笔
【发布时间】：2024-06-25 05:20:01
【问题描述】：

我正在尝试获取一个图案（或图像或其他路径）来充当描边路径的“画笔”。我已经能够获得一条路径，实际上就像一个模式的剪切区域，但这不是我想要的。 http://jsfiddle.net/honkskillet/Yyx3b/（这是我目前拥有的，不是我想要的）

    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
  <defs>
      <pattern id="Pattern" x="0" y="0" width="10" height="10">
          <rect fill="gray"  x="0" y="0" width="100" height="100"/>
          <path id="testPath" d = "M 000 00 L 50 100 L 100 0"  stroke-width = "5" stroke="black" fill="blue"  />
    </pattern> 

  </defs>

    <path d = "M 200 50 L 300 150 L 200 150 L 200 50"  stroke-width = "20" stroke="url(#Pattern)" fill="red">
    </path>

     <rect fill="url(#Pattern)" stroke="black"  x="0" y="0" width="100" height="100"/>

</svg>

我希望图案（或图像或其他路径）沿路径方向定向和平铺。我在javascript中发现了一种复杂的方法 http://codepen.io/honkskillet/pen/AIEpF（路径上的路径）但我想知道是否有一种纯粹的 svg html 方式来实现这一点。干杯

编辑

在路径上绘制路径的非 html 唯一解决方案 HTML

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">

      <path id="testpath" d = "M 50 400 Q 150 150  50 150  T150 400"  stroke-width = "10" stroke="blue" fill="none" >
    </path>

</svg>

Javascript

var a = document.getElementById("testpath"),
    len = a.getTotalLength(),
    steps=20,
    p, p1, dp, pa, pb,
    circle;

for(var i =0; i<steps;i++){
    p =   a.getPointAtLength(len*i/steps);
    p1 =   a.getPointAtLength(len*(i+1)/steps);
    dp={x: p.x-p1.x, y:p.y-p1.y};
    pa= {x: (0.67*p.x+0.33*p1.x)-dp.y,  y:(0.67*p.y+0.33*p1.y)+dp.x};
    pb= {x: (0.33*p.x+0.67*p1.x)+dp.y, y:(0.33*p.y+0.67*p1.y)-dp.x};
    circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
    circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" C"+pa.x+","+pa.y+" "+pb.x+","+pb.y+" "+p1.x+","+p1.y);
    //circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" L"+pa.x+","+pa.y+" L"+pb.x+","+pb.y+" L"+p1.x+","+p1.y);
    circle.setAttribute("stroke-linecap","round");
    circle.setAttribute("stroke-width", "8");
    circle.setAttribute("stroke", "#336699");
    circle.setAttribute("fill", "none");

    document.getElementById("mySVG").appendChild(circle);

}

这将沿着一条路径绘制一条罪曲线。

如果存在的话，我仍然想要一个仅 SVG HTML 的解决方案。

【问题讨论】：

找不到任何 HTML 唯一的方法来做到这一点。我确实在这里编写了一个相对简单的 Javascript 解决方案。

标签： javascript html svg path brush

【解决方案1】：

如果你的意思是你想得到一个沿着笔划线的灰色和蓝色之字形图案，那么不，在 SVG 中没有简单/自动的方法来做到这一点。

【讨论】：

不幸的是，根据我的谷歌搜索研究，我认为你是对的。我可能会接受您的回答，但我会将问题留待几天，看看是否有任何 cmets 进来。

【解决方案2】：

<pattern id="Pattern" x=".1" y=".1" width=".04" height=".04">

【讨论】：

你在哪里建议我在代码 sn-p 的上下文中添加这个？
将 x、y、宽度和高度值固定为
那不符合我的要求。我希望沿路径平铺图案/图像/路径。就像沿着路径的笔触。或者沿着路径的曲折线。