☰

SVG clipPath 有时会在 Windows 和 IE 中剪辑，但在 Chrome/Edge/Firefox 中不会剪辑？

tag-icon • tag-icon svg
SVG clipPath 有时会在 Windows 和 IE 中剪辑，但在 Chrome/Edge/Firefox 中不会剪辑？

下面是一个 SVG 示例 - 黄色圆环旁边显示一个红色半圆。然后对半圆进行变换并将其用作 clipPath 以隐藏部分黄色圆环 - 留下一个圆弧。

它在 IE11 和 Windows 10 PowerToy 中均可运行，可在 Explorer 中显示 SVG 文件预览。但在 Chrome/Edge/Firefox 中，不会发生剪辑，整个黄色环都可见...

我以前遇到过这个问题，解决了它，但忘记了所有细节。现在又出现了，所以我想在这里提出来，以防有人能解释发生了什么。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 768 576" xmlns="http://www.w3.org/2000/svg">
  <path id="bg" d="M0 0h768v576H0z"/>
  <circle cx="384" cy="228" r="167" stroke="#ff0" stroke-width="15" fill-opacity="0" />
  <g clip-path="url(#cp1)">
    <use height="374.0" transform="matrix(0.8405, -0.6003, -0.5903, -0.8547, 495.3025, 387.3162)" width="187.05" xlink:href="#semi-circle"/>
  </g>
  <use xlink:href="#semi-circle" fill="red" transform="translate(20 20)" />
  <defs>
    <g id="semi-circle" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.5, 187.0)">
      <path d="M-93.45 -187.0 Q-16.05 -187.0 38.75 -132.2 93.55 -77.45 93.55 0.0 93.55 77.45 38.75 132.25 -16.05 187.0 -93.45 187.0 L-93.5 187.0 -93.5 -187.0 -93.45 -187.0"/>
    </g>
    <clipPath id="cp1">
      <use height="374.0" transform="matrix(1.0273, 0.0547, -0.0538, 1.0447, 394.9601, 32.1191)" width="187.05" xlink:href="#semi-circle"/>
    </clipPath>    
  </defs>
</svg>

答案1

好的 - 所以当我发布这个问题时，我看到一个类似的问题，所以我知道为什么...... SVG 在 Chrome/Firefox 中无法完全显示

规范规定 clipPath 必须仅包含某些元素（例如，不允许使用 <g>）。<use> 是允许的，但它所指的必须是路径或简单形状（同样不是 <g>）。

因此，这里的解决方法是仅使用路径制作半圆形，并将 id 和变换属性移至该路径。（不过，似乎无法使用组元素有点可惜。）

这是适用于所有浏览器的修复方法...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 768 576" xmlns="http://www.w3.org/2000/svg">
  <path id="bg" d="M0 0h768v576H0z"/>
  <circle cx="384" cy="228" r="167" stroke="#ff0" stroke-width="15" fill-opacity="0" />
  <g clip-path="url(#cp1)">
    <use height="374.0" transform="matrix(0.8405, -0.6003, -0.5903, -0.8547, 495.3025, 387.3162)" width="187.05" xlink:href="#semi-circle"/>
  </g>
  <use xlink:href="#semi-circle" fill="red" transform="translate(20 20)" />
  <defs>
    <path id="semi-circle" d="M-93.45 -187.0 Q-16.05 -187.0 38.75 -132.2 93.55 -77.45 93.55 0.0 93.55 77.45 38.75 132.25 -16.05 187.0 -93.45 187.0 L-93.5 187.0 -93.5 -187.0 -93.45 -187.0" transform="matrix(1.0, 0.0, 0.0, 1.0, 93.5, 187.0)"/>
    <clipPath id="cp1">
      <use height="374.0" transform="matrix(1.0273, 0.0547, -0.0538, 1.0447, 394.9601, 32.1191)" width="187.05" xlink:href="#semi-circle"/>
    </clipPath>    
  </defs>
</svg>

相关内容