是否可以在SVG元素的笔触上使用背景图像？ [英] Is it possible to use a background image on the stroke of an SVG element?

问题描述

正如问题所提到的 - 我想弄明白是否可以使用某种模式或重复的背景图片来描绘SVG路径。

这是否可行？

解决方案

<您可以使用< pattern> 作为笔画，例如

  ; svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlink> 
< defs> 
< pattern id =p1patternUnits =userSpaceOnUsewidth =32height =32> 
< image xlink：href =http://phrogz.net/tmp/alphaball-small.pngwidth =32height =32/> 
< / pattern> 
< / defs> 
< rect stroke-width =32stroke =url（＃p1）width =200height =200/> 
< / svg> 
  

模式可以包含< svg> 绘图元素或（如这里）图像，或两者。

Just as the question asks - I'm trying to figure out whether or not it's possible to use some kind of pattern or repeated background image for the stroke of an SVG path.

Is this doable? Or are you limited to colors only?

TIA!

解决方案

You can use a <pattern> as a stroke e.g.

<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"/>
</svg>

The pattern can contain <svg> drawing elements or (as here) an image, or both.

这篇关于是否可以在SVG元素的笔触上使用背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！