缩放使用inkscape生成的SVG

时间:2016-08-29 10:20:44

标签: html css svg inkscape

我正在尝试调整使用inkscape生成的this SVG文件

我尝试在viewBox="0 0 h w"中使用<svg/>属性,但它裁剪图像而不是调整大小。在期待中感谢

2 个答案:

答案 0 :(得分:2)

Inkscape不会为其生成的文件添加viewBox属性。缩放工作需要该属性。

解决方案是将widthheight值转换为viewBox,然后更改宽度和高度。

因此,请将以下内容添加到您的根<svg>代码中:

viewBox="0 0 205 69"

然后改变你的宽度/高度。如果你想要双倍大小,你可以这样做:

width="410" height="138"

或者,如果您希望它填充页面或它的父容器,您可以这样做:

width="100%" height="100%"

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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"
   viewBox="0 0 205 69"
   width="100%"
   height="100%"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="official.svg">
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.88"
     inkscape:cx="268.4359"
     inkscape:cy="163.44054"
     inkscape:current-layer="layer1"
     inkscape:document-units="px"
     showgrid="false"
     inkscape:window-width="1301"
     inkscape:window-height="744"
     inkscape:window-x="65"
     inkscape:window-y="24"
     inkscape:window-maximized="1">
    <sodipodi:guide
       id="guide3594"
       position="0,370.82039325"
       orientation="0,800.0" />
    <sodipodi:guide
       id="guide3596"
       position="0,229.17960675"
       orientation="0,800.0" />
    <sodipodi:guide
       id="guide3598"
       position="494.427191,0"
       orientation="600.0,0" />
    <sodipodi:guide
       id="guide3600"
       position="305.572809,0"
       orientation="600.0,0" />
    <sodipodi:guide
       id="guide3602"
       position="0,600.0"
       orientation="0,800.0" />
    <sodipodi:guide
       id="guide3604"
       position="600.0,0"
       orientation="0,800.0" />
    <sodipodi:guide
       id="guide3606"
       position="0,800.0"
       orientation="600.0,0" />
    <sodipodi:guide
       id="guide3608"
       position="800.0,0"
       orientation="600.0,0" />
  </sodipodi:namedview>
  <defs
     id="defs2987" />
  <metadata
     id="metadata2990">
    <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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     transform="translate(0,-531)">
    <path
       sodipodi:type="star"
       style="fill:#008080;fill-opacity:1;fill-rule:evenodd;stroke:#008080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
       id="path3003"
       sodipodi:sides="3"
       sodipodi:cx="208.33333"
       sodipodi:cy="448.33334"
       sodipodi:r1="329.16138"
       sodipodi:r2="164.5807"
       sodipodi:arg1="0.57255439"
       sodipodi:arg2="1.6197519"
       inkscape:flatsided="true"
       inkscape:rounded="0.15947024"
       inkscape:randomized="0"
       d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
       inkscape:transform-center-x="-8.8816078"
       inkscape:transform-center-y="-0.012778438"
       transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,212.00937,543.99054)" />
    <path
       sodipodi:type="star"
       style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
       id="path3003-6"
       sodipodi:sides="3"
       sodipodi:cx="208.33333"
       sodipodi:cy="448.33334"
       sodipodi:r1="329.16138"
       sodipodi:r2="164.5807"
       sodipodi:arg1="0.57255439"
       sodipodi:arg2="1.6197519"
       inkscape:flatsided="true"
       inkscape:rounded="0.15947024"
       inkscape:randomized="0"
       d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
       inkscape:transform-center-x="-8.8816118"
       inkscape:transform-center-y="-0.012779205"
       transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,213.12005,546.20636)" />
    <text
       xml:space="preserve"
       style="font-size:16.25434494px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#576a6c;fill-opacity:1;stroke:none;font-family:Century Schoolbook L;-inkscape-font-specification:Century Schoolbook L Medium"
       x="2.427422"
       y="563.2641"
       id="text3791"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan3793"
         x="2.427422"
         y="563.2641"
         style="font-size:36.57227707px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;word-spacing:0px;fill:#576a6c;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">Akogun</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       x="186.45212"
       y="409.6254"
       id="text5280"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan5282"
         x="186.45212"
         y="409.6254" /></text>
    <text
       xml:space="preserve"
       style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008080;fill-opacity:0.50196078;stroke:none;font-family:Sans"
       x="49.39143"
       y="567.16937"
       id="text5284"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan5286"
         x="49.39143"
         y="567.16937" /><tspan
         sodipodi:role="line"
         id="tspan5288"
         x="49.39143"
         y="584.67633"
         style="font-size:13.20665646px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008080;fill-opacity:0.50196078;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">P o l y m a t h</tspan></text>
    <path
       sodipodi:type="star"
       style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
       id="path3003-6-5"
       sodipodi:sides="3"
       sodipodi:cx="208.33333"
       sodipodi:cy="448.33334"
       sodipodi:r1="329.16138"
       sodipodi:r2="164.5807"
       sodipodi:arg1="0.57255439"
       sodipodi:arg2="1.6197519"
       inkscape:flatsided="true"
       inkscape:rounded="0.15947024"
       inkscape:randomized="0"
       d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
       inkscape:transform-center-x="-8.8816136"
       inkscape:transform-center-y="-0.012761026"
       transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,214.3031,538.55495)" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3053"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
         id="flowRegion3055"><rect
           id="rect3057"
           width="598"
           height="182"
           x="102"
           y="144" /></flowRegion><flowPara
         id="flowPara3059" /></flowRoot>    <flowRoot
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       id="flowRoot3296"
       xml:space="preserve"
       transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
         id="flowRegion3298"><rect
           y="164"
           x="30"
           height="218"
           width="502"
           id="rect3300" /></flowRegion><flowPara
         id="flowPara3302" /></flowRoot>  </g>
</svg>

答案 1 :(得分:0)

svg / @ viewBox属性控制视口中显示的坐标范围(svg占用的屏幕区域)。

视口的大小主要取决于svg / @ width和svg / @ height属性 - 请参阅https://www.w3.org/TR/SVG/coords.html

  

最外面的svg元素上的'width'属性建立了视口的宽度[...],如果在引用元素或最外面的svg元素上指定了足以建立视口高度的定位属性,然后这些定位属性确定视口的高度;否则,最外面的svg元素上的'height'属性会建立视口的高度。