在SVG元素的描边上使用背景图片是否可行？

Question

正如问题所问 - 我正在尝试弄清楚是否可以使用某种模式或重复的背景图像作为SVG路径的描边。

这可行吗？还是你只能使用颜色？

TIA！

- grammar

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>绘图元素或者（像这里一样）一张图片，也可以两者兼备。

- Robert Longson

Answer 2

你可以使用属性stroke-dasharray来为描边中的“图案”添加样式：

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

使用此功能，您可以指定笔画和间隙的长度。有关示例，请参见MDN示例页面。

- Sirko

---

谢谢您的回答，但我更倾向于在描边中重复背景图像，而不是使用dasharray。 - grammar