Question

我总是看到了 Add a background image (.png) to a SVG circle shape

但在我的情况下，我需要在不同的图像形状中添加笔画和笔画宽度

这是我的代码：

<svg width="700" height="660">   
<defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url2.png"></image>
    </pattern>   
</defs>   
 <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
 <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

这不起作用，第二个圆圈没有填充图像

和此：

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" stroke-width ="2px" stroke="red"/>
</svg>

笔画和笔画宽度无用

我该怎么办？我只是想显示不同的图像（ps：圆形）并添加不同的轮廓

Answer 1

在patternUnits属性值中使用 objectBoundingBox ，而不是 userSpaceOnUse 。您还需要声明xlink命名空间。因此，请尝试使用以下内容：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660">   
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://www.gravatar.com/avatar/31497e3c546c438c4eea4b68d6f9f027?s=32&d=identicon&r=PG&f=1"></image>
    </pattern>   
    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" xlink:href="https://lh5.googleusercontent.com/-x_BhuHcC8Ww/AAAAAAAAAAI/AAAAAAAAABg/hiPWIjRXbhI/photo.jpg?sz=64"></image>
    </pattern>   
  </defs>   
  <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)"  stroke-width ="2px" stroke="red"/> 
  <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)"  stroke-width ="2px" stroke="red"/>
</svg>

如果您运行代码段，则会看到您的个人资料图标显示在第一个圈子中，而我的 - 在第二个圈子中显示。

如何将不同的背景图像（.png）添加到SVG圆形，并设置笔划？

1 个答案: