タイポグラフィマスクの形をアニメートするSVG

Question

私の新しいウェブサイトでは、クリップパスプロパティのようなタイポグラフィの中でモーフィングシェイプをマスクしたいと思います。私はモーフィングをしましたが、マスクではありませんでした。

私は私の例とjsFiddleの写真を2枚入れました。

私の例： jsFiddleのexemple：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>でアニメーションのブロブをマスクします。

以下の例は、一般的な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>