在没有viewBox的情况下围绕中心缩放？

Posted 2023-02-25

【中文标题】在没有viewBox的情况下围绕中心缩放？

【英文标题】：Scaling around center without viewBox?

【发布时间】：2017-03-31 17:38:49

【问题描述】：

我知道对此进行了很多辩论，但我想知道是否有一种方法可以在不使用 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"
   
   
   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-
   inkscape:window-
   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"
   
   
   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"
	   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"
	   to="1"
     dur="1s"
     fill="freeze" />
</svg>

【问题讨论】：

您可以嵌套 svg 元素，并根据需要将 viewBox 属性放在嵌套的 svg 元素上。

谢谢罗伯特·朗森。你能告诉我在这个例子中嵌套另一个 svg 是如何做到的吗？对不起，但我是新手，似乎我自己做不到。我设法通过另一个嵌套的 svg 移动了红色圆圈，但它在缩放时仍然移动。

我真的不知道你想做什么。我只是纠正了您在括号中的第一个句子中的错误假设。

能否缩放红圈以保持其中心点？

我看不到红色圆圈，只有黄色方块。

【参考方案1】：

缩放元素时，不仅缩放它的大小，还缩放它的位置。如您所见。

有多种方法可以实现该解决方案，但它们背后的一般原则是，圆必须围绕它自己的原点进行缩放，而不是 SVG 的原点（即左上角）。

一种方法是将圆的定位责任转移给父组，从而有效地将圆置于其自己的坐标空间中。

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

所以现在，就圆而言，它位于原点 (0,0)。当您使用动画缩放它时，它会围绕原点缩放 - 因此不会移动。但其最终位置仍由其父组的平移变换决定。

<svg id="star"  >
    
<rect
   style="fill:#ffcc00;fill-opacity:1;stroke:none"
   id="yelrect"
   
   
   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"
	   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"
	   to="1"
     dur="1s"
     fill="freeze" />
</svg>

【讨论】：

非常感谢 Paul LeBeau，这澄清并解决了问题！