Question

是否可以在同一个svg上使用多个转换？我的代码中已经有transform="translate(-186.57429,-373.01893)"，但我希望使用scale(0.5)将图片大小减半。

我一直无法找到答案，也许我的谷歌搜索技巧不好。任何帮助将不胜感激。这是SVG代码

<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32.2"
   height="37"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="comment.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="2.8"
     inkscape:cx="51.134813"
     inkscape:cy="31.956267"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1147"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     preserveAspectRatio="xMinYMin"/>

  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-186.57429,-373.01893)">
    <path
       style="fill:#ececec;stroke:#ececec;stroke-width:0.70775092px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 207.25539,445.72259 c 8.18855,-4.77517 9.49259,-8.30548 9.49259,-8.30548 0,0 -18.93579,3.54059 -24.23426,-3.35689 -5.29848,-6.89746 -8.67023,-55.71033 -1.44504,-58.3632 7.22519,-2.65288 50.58563,-4.2446 55.88411,2.12229 5.29847,6.3669 4.81679,51.99632 -0.48168,56.77149 -5.29848,4.77517 -18.5529,3.01002 -18.5529,3.01002 0,0 -7.65748,6.53005 -20.66282,8.12177 z"
       id="path2985"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccsssscc" />
  </g>
</svg>

Answer 1

您可以为比例传递另一个转换定义：

<g transform="scale(0.5 0.5) translate(-186.57429 -373.01893)">

来自MDN docs on transform：

transform属性定义了一个转换定义列表 应用于元素和元素的子元素。中的项目变换列表由空格和/或逗号分隔，并且是从右到左应用。

或者，您可以传递转换矩阵以应用比例和翻译：

<g transform="matrix(0.5 0 0 0.5 -186.57429 -373.01893)">

它是如何工作的？转换矩阵有六个属性，通过检查上面代码段中的参数可以看出 - matrix(<a> <b> <c> <d> <e> <f>)。

每个参数以下列方式映射到转换的参数：

<a> - 比例X
<b> - 扭曲Y
<c> - 歪斜X
<d> - 缩放Y
<e> - 翻译X
<f> - 翻译Y

同时使用多个svg转换。

1 个答案: