SVG - Skala Weg von der Mitte wiederholt (pulsierender)

Ich habe eine svg-Grafik mit einem zentralen Punkt (100, 100).

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

Einen Pfad (wie ein Kreis) sollte surround es und zu pulsieren - ich meine, es sollte sich selbst skaliert von 0 auf einen Wert, zentrale auf den Punkt (100,100).
Während dies zu tun der Impuls sollte zu Beginn auch die Deckkraft=0, opacity=0.5 und zurück Deckkraft=0.
(Ich will nicht zu verwenden, stattdessen der Pfad.)

Sieht die ganze Sache so:

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

Es funktioniert nicht wie ich will, der Puls beginnt von der Mitte, aber nach unten bewegt, um das Recht, während das up-scaling.
Weiß jemand, wie es richtig zu machen?
Vielen Dank im Voraus.
(Ich sah mehrere andere Beiträge, aber es hat mir nicht geholfen)

InformationsquelleAutor Dunkelbunt27 | 2013-11-02
  1. 1

    Den scale() transformation (wie alle anderen ebenso tun) im Grunde nur multipliziert alle Werte in einem Koordinatensystem mit den jeweiligen Skalierungsfaktor. Als Ergebnis, wenn das Objekt nicht zentriert auf den Ursprung (0,0), es scheint sich zu bewegen Weg von der Mitte.

    Also die einfache Lösung ist, um Ihr Objekt mit seinem Mittelpunkt im Ursprung, anwenden der transformation und die verschieben es auf, wo immer Sie es haben wollen.

    Gründen der Faulheit ich zog Ihre path-element mit einem transform="translate(-100 -100)". Der gleiche Effekt könnte erzielt werden durch ändern der Koordinaten selbst.

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

    Beispiel Geige

    • Sieht genial aus, danke!
    InformationsquelleAutor Sirko
  2. 0

    Versuchen, zu erstellen Abbildung in Adobe Illustrator mit Mittelpunkt x="10" y="15" Breite, Höhe=10 und sparen. Du wirst sehen, weiter im text-editor :

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

    Festgelegt Koordinaten der Abbildung Mitte von x="10" y="15" x=0, y=0 (transformation-Fenster in Adobe Illustrator) und speichern. Du wirst sehen, weiter im text-editor :

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

    Machen für Sie defs block und verwenden Sie es. Add scale-Effekt(jetzt ist es von der Mitte)

    <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)"/>
    InformationsquelleAutor Artem.Borysov
Schreibe einen Kommentar