2

(100, 100) に中心点を持つ svg グラフィックがあります。

<g id="centre">
 <circle cx="100" cy="100" r="2"/>
</g>

パス (円のような) がそれを取り囲み、脈動する必要があります。つまり、ポイント (100,100)を中心として、0 から value までスケールする必要があります。これを行っている間、パルスは opacity=0 で開始し、opacity=0.5 まで、そして opacity=0 に戻る必要があります。 （パスの代わりに使用したくありません。）

全体は次のようになります。

<g transform="translate(100,100)">
    <g id="pulse" >
        <radialGradient id="SVGID_4_" cx="100" cy="100" r="21.2498" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
            <stop  offset="1" style="stop-color:#006837" />
        </radialGradient>
        <path opacity="0.5" fill="url(#SVGID_4_)" stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" d="M120.864,99.676
            c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037
            C119.193,90.281,120.864,94.783,120.864,99.676z" />
        <animateTransform 
            attributeType="xml"
            attributeName="transform"
            type="scale"
            from="0"
            by="3"
            dur="2s" 
            fill="freeze"           
            repeatCount="indefinite"
            />  
        <animate 
            attributeType="xml" 
            attributeName="fill-opacity" 
                from="0" 
                to="0" 
                values="0;0.5;0"
            dur="2s" 
            repeatCount="indefinite" 
            fill="freeze" />            
    </g>
</g>

<g id="centre">
    <circle cx="100" cy="100" r="2"/>
</g>
</svg>

思うように動きません。パルスは真ん中から始まりますが、スケールアップしながら右に下がります。誰かがそれを正しく行う方法を知っていますか? 前もって感謝します。 （他の記事もいくつか調べましたが、役に立ちませんでした）

4

2 に答える 2

1

変換は (他のscale()すべてが同様に行うように) 基本的に、すべての座標値にそれぞれの倍率を乗算するだけです。その結果、オブジェクトが原点 (0,0) の中心にない場合、中心から離れて移動しているように見えます。

したがって、簡単な解決策は、オブジェクトの中心を原点に置き、変換を適用して、必要な場所に移動することです。

怠惰のために、. を使用してパス要素を移動しましたtransform="translate(-100 -100)"。座標自体を変更しても、同じ効果が得られます。

<!-- the other code -->
<path d="..." opacity="0.5" fill="url(#SVGID_4_)" 
      stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" 
      transform="translate(-100 -100)"/>
<!-- more other code -->

フィドルの例

于 2013-11-02T14:16:42.230 に答える
0

Adobe Illustrator で中心が x="10"、y="15"、幅、高さ = 10 の図を作成して保存してみてください。次に、テキスト エディターに次のように表示されます。

    <rect x="5" y="10" width="10" height="10" fill="black">

図形中心の座標を x="10", y="15" から x=0, y=0 (Adobe Illustrator の変換ウィンドウ) に設定して保存します。次に、テキスト エディターに次のように表示されます。

    <rect x="-5" y="-5" width="10" height="10" fill="black">

そのための defs ブロックを作成して使用します。スケール効果を追加します（今は中心から）

<defs>
    <rect id="any_figure" x="-5" y="-4.5" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="10" height="10">
        <!--it animates scale up and scale down onclick -->
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.05" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.05" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
    </rect>
</defs>
<use xlink:href="#any_figure"  transform="translate(10,15)"/>
于 2015-04-26T20:31:03.597 に答える