同時使用多個svg轉換。

是否可以在同一個svg上使用多重轉換？我的代碼中已有transform="translate(-186.57429,-373.01893)"，但我想使用scale(0.5)將圖像大小減半。同時使用多個svg轉換。

我一直無法找到答案，也許是我的錯誤谷歌搜索技巧。任何幫助將不勝感激。下面是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>

來源

2014-03-02 Bazinga777

您只需通過另一個轉換定義爲規模：

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

從MDN docs on transform：

變換屬性定義的轉換定義一個列表即適用於元素和元素的子元素。變換列表中的項目由空格和/或逗號分隔，並且從右向左應用。

或者，你可以通過一個變換矩陣應用規模和翻譯：

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

它是如何工作的？轉換矩陣有六個屬性，可以通過檢查上述代碼段中的參數來看到 - matrix(<a> <b> <c> <d> <e> <f>)。

每個參數映射到以下面的方式所涉及的變換參數：

<a> - 規模X
<b> - 歪斜ý
<c> - 歪斜X
<d> - 縮放Y
<e> - 翻譯X
<f> - 翻譯Y

來源

2014-03-02 19:18:56

同時使用多個svg轉換。

回答

相關問題