在沒有viewBox的情況下圍繞中心進行縮放？

Question

我知道很多人一直在討論這個問題，但我想知道是否有一種方法可以在不使用viewBox的情況下圍繞其中心縮放元素（據我所知，它必須應用於svg，而不是到單個對象）。在本練習中，我正在努力理解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（左上角）。

其中一種方法是通過將其定位的職責轉移到父組，將其有效地放置在自己的座標空間中。

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