Question

如此正确 -

我有两个SVG，第一个是蓝色圆圈，第二个是美国地图。（均在Illustrator中创建）

我希望地图成为蓝色球的面具。

最终目标是为蓝色球设置动画以填充地图。

但首先我需要让这些蒙版工作，我不能，我已经尝试了剪切路径，但是该解决方案仅适用于FF，而不适用于在Illustrator中创建的任何文件。

这就像我要让面具工作一样接近，这只适用于Chrome。

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

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

在该示例中，圆圈是面具，当我切换地图时，圆圈就会断开。

Answer 1

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

Dirk Schultz's article非常清楚。

如果你想要可靠的剪裁和屏蔽，你可能只会屏蔽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>

SVG Mask不使用illustrator生成的SVG（所有浏览器）

1 个答案: