印刷术掩模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脚本。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;