Skalierung um das Zentrum ohne viewBox?

Ich weiß viel wurde darüber diskutiert, aber ich würde gerne wissen, ob es eine Möglichkeit gibt, ein Element um sein Zentrum zu skalieren, ohne Verwendung von viewBox (die, soweit ich gelernt habe, muss auf die SVG angewendet werden, und nicht zu einem einzigen Objekt). In dieser Übung arbeite ich daran, die Logik der SVG-Skalierung zu verstehen. Ich möchte, dass der (unsichtbare) rote Kreis erscheint und dann skaliert wird (als ob er aufgetaucht wäre), wenn Sie auf das gelbe Rechteck klicken. Kann mir jemand helfen? Vielen Dank im VorausSkalierung um das Zentrum ohne viewBox?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    version="1.1" 
 
    id="star" 
 
    x="170px" 
 
    y="385px" 
 
    width="100px" 
 
    height="100px" 
 
    xml:space="preserve" 
 
    inkscape:version="0.48.5 r10040" 
 
    sodipodi:docname="Exercise n.1.svg"><metadata 
 
    id="metadata17"><rdf:RDF><cc:Work 
 
     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type 
 
     rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs 
 
    id="defs15" /><sodipodi:namedview 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1" 
 
    objecttolerance="10" 
 
    gridtolerance="10" 
 
    guidetolerance="10" 
 
    inkscape:pageopacity="0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:window-width="1366" 
 
    inkscape:window-height="705" 
 
    id="namedview13" 
 
    showgrid="false" 
 
    inkscape:zoom="2.36" 
 
    inkscape:cx="-22.881356" 
 
    inkscape:cy="50" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" 
 
    inkscape:current-layer="star" /> 
 
    
 
<rect 
 
    style="fill:#ffcc00;fill-opacity:1;stroke:none" 
 
    id="yelrect" 
 
    width="33.050846" 
 
    height="30.084745" 
 
    x="14.457626" 
 
    y="25.847458" 
 
    ry="1.6126924" /> 
 
<path 
 
    sodipodi:type="arc" 
 
    style="fill:#ff0000;fill-opacity:1;stroke:none;opacity:0" 
 
    id="redcircle" 
 
    sodipodi:cx="70.338982" 
 
    sodipodi:cy="15.466102" 
 
    sodipodi:rx="9.3220339" 
 
    sodipodi:ry="8.2627115" 
 
    d="m 79.661016,15.466102 a 9.3220339,8.2627115 0 1 1 -18.644068,0 9.3220339,8.2627115 0 1 1 18.644068,0 z" 
 
    transform="matrix(0.96545455,0,0,1.0892308,1.1926041,24.577574)" /> 
 
<animateTransform 
 
    id="redcircle_anim1" 
 
    xlink:href="#redcircle" 
 
    attributeName="transform" 
 
\t type="scale" 
 
    begin="yelrect.click" 
 
    by="1" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
<animate 
 
    id="redcircle_anim2" 
 
    xlink:href="#redcircle" 
 
    attributeName="opacity" 
 
    begin="redcircle_anim1.begin" 
 
    from="0" 
 
\t to="1" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
</svg>

Quelle

2017-03-31 pablobs88

Sie können viewBox svg Elemente Nest und setzen Attribute auf den verschachtelten svg Elemente, wenn Sie wollen. –

Danke Robert Longson. Könntest du mir so freundlich zeigen, wie das Verschachteln eines anderen Svg in diesem Beispiel den Trick machen kann? Tut mir leid, aber ich bin neu und scheint, ich kann es nicht selbst tun. Es gelang mir, den roten Kreis über ein anderes verschachteltes Svg zu bewegen, aber es bewegt sich immer noch beim Skalieren. – pablobs88

Ich weiß nicht wirklich was du machen willst. Ich korrigierte einfach deine falsche Annahme in deinem ersten Klammersatz. –

Wenn Sie ein Element skalieren, skaliert man nicht nur seine Größe, sondern auch seine Position. Wie du gesehen hast.

Es gibt verschiedene Möglichkeiten, die Lösung zu implementieren, aber das allgemeine Prinzip dahinter lautet, dass der Kreis um seinen eigenen Ursprung herum skaliert werden muss und nicht den des SVG (der oben links ist).

Eine Möglichkeit ist, den Kreis effektiv in seinen eigenen Koordinatenraum zu bringen, indem die Verantwortung für die Positionierung auf eine Elterngruppe verschoben wird.

<g transform="translate(31,20)"> 
    <circle cx="0" cy="0" ... /> 
</g>

Also jetzt, soweit der Kreis betroffen ist, ist es im Ursprung (0,0). Wenn Sie es mit der Animation skalieren, skaliert es um den Ursprung - und bewegt sich somit nicht. Ihre endgültige Position wird jedoch immer noch von der Translationstransformation ihrer Elterngruppe bestimmt.

<svg id="star" width="100px" height="100px"> 
 
    
 
<rect 
 
    style="fill:#ffcc00;fill-opacity:1;stroke:none" 
 
    id="yelrect" 
 
    width="33.050846" 
 
    height="30.084745" 
 
    x="14.457626" 
 
    y="25.847458" 
 
    ry="1.6126924" /> 
 
<g transform="translate(31,20)"> 
 
    <ellipse cx="0" cy="0" rx="9.3220339" ry="8.2627115" 
 
      style="fill:#ff0000;fill-opacity:1;stroke:none;opacity:0" 
 
      id="redcircle" /> 
 
</g> 
 

 
<animateTransform 
 
    id="redcircle_anim1" 
 
    xlink:href="#redcircle" 
 
    attributeName="transform" 
 
\t type="scale" 
 
    begin="yelrect.click" 
 
    by="1" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
<animate 
 
    id="redcircle_anim2" 
 
    xlink:href="#redcircle" 
 
    attributeName="opacity" 
 
    begin="redcircle_anim1.begin" 
 
    from="0" 
 
\t to="1" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
</svg>

Quelle

2017-04-02 06:23:10

Vielen Dank Paul LeBeau, dies geklärt und das Problem gelöst! – pablobs88

Skalierung um das Zentrum ohne viewBox?

Antwort

Verwandte Themen