html - SVG Mask 不适用于插画师生成的 SVG(所有浏览器)

Question

太对了 -

我有两个 SVG，第一个是蓝色圆圈，第二个是美国 map 。 (均在 Illustrator 中创建)

我希望 map 成为蓝球的掩码。

最终目标是让蓝色球充满 map 。

但首先我需要使这些蒙版起作用，但我做不到，我也尝试了剪切路径，但该解决方案仅适用于 FF，不适用于在 Illustrator 中创建的任何文件。

我已经接近让面具起作用了，这只适用于 Chrome。

我正在使用 .class {clip-path: url(#clipping);} 方法。

http://codepen.io/CiderZombie/pen/EPzyeN

在该示例中，圆圈是 mask ，当我切换 map 时，圆圈会断开。

Answer 1

HTML 元素的裁剪和屏蔽在浏览器中仍然不一致且部分支持。

Dirk Schultz's article涵盖得很好。

如果您想要可靠的裁剪和 mask ，您可能只能使用 mask SVG 元素。

<svg width="100" height="100">
  
  <defs>
    <clipPath id="usmap">
      <path d="m8 18 62 6 9 10 l 19 -12 1 6 -4 22 -10 17 7 15 -2 1 -13 -14 -18 -1 -12 13 -13 -16 -19 -1 -14 -21 1 -16z"/>
    </clipPath>
  </defs>

  <circle cx="50" cy="50" r="50" fill="#DF090C" clip-path="url(#usmap)"/>
  <circle cx="50" cy="50" r="30" fill="blue" clip-path="url(#usmap)"/>
</svg>