我创建了一个 svg 用作图像的剪辑路径,它在 Firefox 中看起来很完美,但它在 Chrome 中不起作用,我想知道问题出在哪里。
Chrome 应该支持内联 svg 剪辑路径 according to this .
全力支持according to MDN .
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>
最佳答案
Chrome 目前不支持外部 SVG 文件。
您可以在这里查看: https://caniuse.com/#search=CSS%20clip
以下是他们对 Chrome 的部分支持的看法:
Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.
关于带有 svg 的 css 剪辑路径在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50921039/