無法使用填充顏色顯示 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>