我的目標是給fillSVG 的背景加上#2590eb顏色。我不知道為什么它不起作用。圖片是透明png。嘗試將圖片大小調整為較小的寬度,但不起作用。任何幫助將非常感激。
<svg width="500" height="500" viewBox="0 0 500 500">
<clipPath id="clip-path" transform="translate(292.7 145.85)">
<path d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3
-125C94.7 -125 189.3 -62.5 189.3 52.1" fill="#2590eb" >
</clipPath>
<!-- xlink:href for modern browsers, src for IE8- -->
<image clip-path="url(#clip-path)" xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x='50' src="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" alt="Image" height="500" width="500" class="svgImg">
</svg>
uj5u.com熱心網友回復:
由于填充路徑在 clipPath 內使用,因此您看不到它。在下一個示例中,我在影像元素之前使用了 use 路徑。
我還通過更改 svg 元素的 viewBox 消除了您的轉換。
<svg width="500" height="500" viewBox="-292.7 -145.85 500 500">
<clipPath id="clip-path">
<path id="thePath" d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3 -125C94.7 -125 189.3 -62.5 189.3 52.1" fill="#2590eb" />
</clipPath>
<use xlink:href="#thePath" />
<image clip-path="url(#clip-path)" xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x='-300' y="-150" height="500" width="500" class="svgImg" />
</svg>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/372306.html
下一篇:SVG影片到路徑
