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

Question

我已经看到将 背景图像 (.png) 添加到 SVG 圆形

但就我而言，我需要在不同的图像形状中添加笔画和笔画宽度

这是我的代码：

<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

在属性值中使用objectBoundingBoxpatternUnits而不是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>

如果您运行代码片段，那么您将看到，您的个人资料图标显示在第一个圆圈中，而 my - 显示在第二个圆圈中。