4

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

这是可行的吗?还是您仅限于颜色?

蒂亚!

4

2 回答 2

10

您可以使用 a<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>绘图元素或(如这里)图像,或两者兼而有之。

于 2013-06-07T16:03:33.310 回答
1

您可以stroke-dasharray在笔划中使用“模式”的属性:

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

有了这个,您可以指定笔画的长度和间距。有关一些示例,请查看MDN 示例页面

于 2013-06-07T15:56:26.783 回答