viewBoxを使わずに中心を中心にスケーリングしますか？

Question

私はこれについて議論されていることはよく知っていますが、viewBoxを使用せずにその中心の周りに要素をスケールする方法があるかどうかを知りたいのですが（私が学んだ限り、svgに適用する必要があります。 1つのオブジェクトに）。このエクササイズでは、svgスケーリングのロジックを理解するために取り組んでいます。黄色の四角形をクリックすると、（見えない）赤丸が表示され、次にポップアップするようにスケールします。誰か助けてくれますか？

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

Answer 1

あなたは要素をスケーリング事前のおかげで、あなたはその大きさが、また、その位置だけでなく、スケール。あなたが見たように。

ソリューションを実装する方法はさまざまですが、その背後にある一般的な原則は、SVG（左上）の円ではなく、独自の原点を中心に円を拡大する必要があるということです。

1つの方法は、親グループへの配置の責任をシフトすることによって、それ自身の座標空間に円を効果的に置くことです。

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

今のところ、円に関する限り、原点（0,0）にあります。アニメーションでスケールすると、原点の周りでスケールされます - したがって移動しません。しかし、その最終位置は、依然としてその親グループの変換変換によって決定される。あなたがしたい場合

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