是否可以在SVG元素的笔划上使用背景图像？

Question

就像问题一样 - 我正在试图弄清楚是否可以使用某种模式或重复的背景图像来处理SVG路径的笔划。

这可行吗？或者你只限于颜色？

TIA！

Answer 1

您可以使用<pattern>作为中风，例如

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
          <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
        </pattern>
      </defs>
      <rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/>
    </svg>

模式可以包含<svg>个绘图元素或（如此处）图像，或两者兼而有之。

Answer 2

您可以在笔画中使用属性stroke-dasharray作为“模式”：

<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />

通过这个你可以指定笔画的长度和间隙。有些示例请查看MDN example page。