排版蒙版 SVG 中的动画形状

Question

对于我的新网站，我想在诸如剪辑路径属性之类的排版中屏蔽变形形状。我做了变形，但没有做面具，知道吗？

我放了两张我的例子的照片和一个 jsFiddle。

我的例子： jsFiddle 示例：http://jsfiddle.net/aw8zvsbn/32/

s = Snap(1000, 500);
s.attr('fill', 'red');
s.attr({ viewBox: "80 230 340 100" });

var path = s.path("m238 324c-19.4 0.618-33.4-27.3-47.6-37-8.27-5.66-35.8-21.4-28.5-35 2.51-4.67 18.8-4.3 22.4-5.5 11.4-3.83 15.8-10.8 25.8-16.6 29.7-17.2 32.2 14.8 58.1 11.5 8.36-1.06 13.3-11.8 21.4-14.3 10.6-3.22 20.8 1.61 31 5.74 18.4 7.48 25.4 13.8 13.5 36.2-12.2 22.9-27.6 9.32-43.3 23.5-7.57 6.78-7.33 16.8-16 23-9 7-26 9-37 9-12 0 15 0 0 0z");
path.animate({ d: "m187 302c-13.3-0.667-12.9 9.71-27.5-0.5-9.9-6.91-6.5-13.6-3-28.2 3-15-12-37 3-44 11.1-5.07 35 16.9 54 20s26.4-20 45.2-17.2 11.1 15.4 34.3 16.8c20.6 1.2 60.8-0.555 55.7 22.7-6.36 29-44 23-61.7 33.5-10.3 6.1-25-13.4-33.2-6-10.3 9.38-21.3 14.2-33.3 15.2s-21-12-34-13z" }, 6000, mina.linear);

任何帮助都是宝贵的。 对不起我的英语，我是法国人

Answer 1

您只需用一些 <text> 来掩盖动画 blob。

下面的纯 SVG 示例。我会让你把它翻译成 Snap 脚本。

<svg viewBox="80 230 340 100">
  <defs>
    <!-- some text we will use for masking the red blob,
         and also for the green text in the background.
         We define it here once so we don't have to repeat it twice. -->
    <g id="mytext" font-size="50" font-family="sans-serif" font-weight="bold">
      <text x="100" y="270">CLOTHING</text>
      <text x="150" y="310">BRAND</text>
    </g>
    
    <!-- Define the mask that we will use to show only part of the red blob -->
    <mask id="textmask">
      <use xlink:href="#mytext" fill="white"/>
    </mask>
  </defs>

  <!-- Display an instance of the text in green -->
  <use xlink:href="#mytext" fill="limegreen"/>

  <!-- The red blob masked with our text mask -->
  <path d="M187,302C173.7,301.333,174.1,311.71,159.5,301.5C149.6,294.59,153,287.9,156.5,273.3C159.5,258.3,144.5,236.3,159.5,229.3C170.6,224.23000000000002,194.5,246.20000000000002,213.5,249.3C232.5,252.4,239.9,229.3,258.7,232.10000000000002C277.5,234.90000000000003,269.8,247.50000000000003,293,248.90000000000003C313.6,250.10000000000002,353.8,248.34500000000003,348.7,271.6C342.34,300.6,304.7,294.6,287,305.1C276.7,311.20000000000005,262,291.70000000000005,253.8,299.1C243.5,308.48,232.5,313.3,220.5,314.3C208.5,315.3,199.5,302.3,186.5,301.3C186.5,301.3,187,302,187,302C187,302,187,302,187,302" fill="#ff0000" mask="url(#textmask)"></path>

</svg>