无法在具有填充颜色的 SVG 路径内显示图像

Question

我想在带有填充颜色的 SVG 路径上显示 png 图像。

尝试了以下解决方案：

• https://stackoverflow.com/a/3798797/9372104
• https://stackoverflow.com/a/47668176/9372104

这些解决方案面临的问题是我不能同时在路径内填充颜色和图像。我必须删除颜色填充以便填充路径。

这里是例子：

<svg viewBox="0 0 1880.7004 1240.6498" height="200" width="300" y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0" width="1" height="1" viewBox="0 -200 100 350">
      <image width="100" height="100" xlink:href="https://cdn.glitch.me/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg" />
    </pattern>
  </defs>
  <g transform="matrix(-0.93722287,0.34873097,-0.34873097,-0.93722287,3859.4131,138.8554)" id="g5084">
    <path style="fill:#1b2948" fill="url(#imgpattern)" id="path59" d="m 3190.769,783.804 c 0.51,-0.836 1.046,-1.657 1.635,-2.442 l -2.625,2.327 -412.172,-47.983 75.376,102.135 -264.389,-37.132 39.793,-5.177 c 7.954,-2.745 10.412,-12.775 4.62,-18.958 L 2129.254,270.138 c -24.446,-25.632 -61.478,-64.869 -66.782,-71.891 -3.409,-4.492 -5.975,-8.364 -7.607,-12.848 29.068,14.482 55.688,33.76 78.678,57.174 l 247.827,241.105 225.108,20.004 1.061,1.423 541.945,51.506 c 42.951,14.094 73.649,24.056 79.768,25.789 20.624,5.862 28.556,2.757 46.099,-3.878 1.38,-0.551 2.729,-1.028 4.109,-1.579 4.49,-1.718 7.809,-4.127 10.319,-6.998 l 295.368,28.072 -109.795,-0.239 139.225,184.187 155.527,17.834 c 6.057,16.956 10.297,29.089 12.158,34.885 1.935,6.067 3.29" stroke="#c0392b" stroke-width="10"></path>
  </g>
</svg>

我必须从路径中删除 style="fill:#1b2948" 以显示图像，我希望 SVG 保持原样，但上面有图像。

Answer 1

以下是实现此目的的步骤：

• 定义具有唯一 ID 的模式
• 在图案中添加一个形状（如椭圆或矩形）并用您想要的颜色填充它
• 向图案中添加图像
• 使用填充属性用图案填充路径

请注意，模式中的 viewBox 会使图像保持该纵横比。如果您不希望这样，您可以添加 preserveAspectRatio="none" 但图像将不再保持其纵横比。

<svg viewBox="0 0 1880.7004 1240.6498" height="200" width="300" y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0" width="1" height="1" viewBox="0 -200 100 350">
      <ellipse rx="1000" ry="500" fill="rgba(0, 0, 0, 100)" />
      <image width="100" height="100" xlink:href="https://cdn.glitch.me/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg" />
    </pattern>
  </defs>
  <g transform="matrix(-0.93722287,0.34873097,-0.34873097,-0.93722287,3859.4131,138.8554)" id="g5084">
    <path fill="url(#imgpattern)" id="path59" d="m 3190.769,783.804 c 0.51,-0.836 1.046,-1.657 1.635,-2.442 l -2.625,2.327 -412.172,-47.983 75.376,102.135 -264.389,-37.132 39.793,-5.177 c 7.954,-2.745 10.412,-12.775 4.62,-18.958 L 2129.254,270.138 c -24.446,-25.632 -61.478,-64.869 -66.782,-71.891 -3.409,-4.492 -5.975,-8.364 -7.607,-12.848 29.068,14.482 55.688,33.76 78.678,57.174 l 247.827,241.105 225.108,20.004 1.061,1.423 541.945,51.506 c 42.951,14.094 73.649,24.056 79.768,25.789 20.624,5.862 28.556,2.757 46.099,-3.878 1.38,-0.551 2.729,-1.028 4.109,-1.579 4.49,-1.718 7.809,-4.127 10.319,-6.998 l 295.368,28.072 -109.795,-0.239 139.225,184.187 155.527,17.834 c 6.057,16.956 10.297,29.089 12.158,34.885 1.935,6.067 3.29" stroke="#c0392b" stroke-width="10"></path>
  </g>
</svg>