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

Answer 1

缩放元素时，不仅要缩放其大小，还要缩放其位置。如你所见。

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

一种方法是通过将圈子的定位责任转移到父组来有效地将圈子放入其自己的坐标空间。

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

所以现在，就圆圈而言，它位于原点（0,0）。当您使用动画缩放它时，它会围绕原点缩放 - 因此不会移动。然而，它的最终位置仍然取决于其母组的翻译变换。

＆＃13;

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

＆＃13;

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

1 个答案: