无法使用填充颜色显示 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

只需在图像后面添加一个矩形，这样在图像透明的地方，矩形就会显示出来。

请注意，模式中的 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"> <rect y="-200" width="100" height="350" fill="#1b2948"/> <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>