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

Posted 2023-03-06

【中文标题】无法在具有填充颜色的 SVG 路径内显示图像

【英文标题】：Can't show image inside SVG path with fill color

【发布时间】：2022-01-13 14:19:30

【问题描述】：

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

尝试了以下解决方案：

https://***.com/a/3798797/9372104 https://***.com/a/47668176/9372104

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

这里是例子：

<svg viewBox="0 0 1880.7004 1240.6498"   y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0"   viewBox="0 -200 100 350">
      <image   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-></path>
  </g>
</svg>

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

【问题讨论】：

如果我理解正确，您可以 1. 使用带有<use> 的路径，用颜色填充路径，用图案填充<use>。 2.在图案内的图像后面添加一个填充的矩形

【参考方案1】：

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

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

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

<svg viewBox="0 0 1880.7004 1240.6498"   y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0"   viewBox="0 -200 100 350">
      <ellipse rx="1000" ry="500" fill="rgba(0, 0, 0, 100)" />
      <image   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-></path>
  </g>
</svg>

【讨论】：

我们可以在整个路径中添加颜色#1b2948，同时有图像吗？根据您的解决方法，颜色就在图像后面。我想填写整个路径。

preserveAspectRatio="none" 正如我在答案中已经说过的那样。