2016-05-25 7 views
1

私はanimation for a balloonを達成しようとしています。 balloonが空中に浮かんでいるかのようにスレッドを少し動かしたいです。私は動きを得ることができますが、何らかの理由でスレッドの位置が間違っています。スレッドのポジショニング値が間違っていることを理解していますが、バルーンとどのように一致させるのですか?Svgバルーンスレッドアニメーション

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> 
 
    <g> 
 
    <path id="thread" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> 
 
     <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; 
 
        M60 302 c0 10 3 90 0 136; 
 
        M60 302 c0 10 10 90 0 138; 
 
        M60 302 c0 10 -3 90 0 136; 
 
        M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> 
 
    </path> 
 
    <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> 
 
    <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> 
 
    </g> 
 

 
</svg>

答えて

2

A変換の変換パスを移動することができます。

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> 
 
    <g> 
 
    <path id="thread" transform="translate(242, 130)" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> 
 
     <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; 
 
        M60 302 c0 10 3 90 0 136; 
 
        M60 302 c0 10 10 90 0 138; 
 
        M60 302 c0 10 -3 90 0 136; 
 
        M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> 
 
    </path> 
 
    <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> 
 
    <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> 
 
    </g> 
 

 
</svg>