[英]SVG clippath with image and fill
我的目标是用#2590eb
颜色fill
SVG 的背景。 我不知道为什么它不起作用。 图片为透明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>
由于在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.