SVG - 從中​​心重複（脈動）的比例路徑

Question

我有一箇中心點在（100，100）的svg圖形。

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

的路徑（如圓）應環繞它和脈動 - 我的意思是，它應該自身規模從0到的點（100,100）的值，集中。 雖然這樣做，脈衝也應該從不透明度= 0開始，到不透明度= 0.5並回到不透明度= 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> 

---

它不工作，我想，脈衝從中間開始，但向下移動到右側，同時放大。 有沒有人知道如何做到這一點？ 在此先感謝。 （我擡頭其他幾個職位，但它並沒有幫助我）

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

Example Fiddle

Answer 2

嘗試在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> 
    <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)"/>