我正在尝试调整使用inkscape生成的this SVG文件
我尝试在viewBox="0 0 h w"
中使用<svg/>
属性,但它裁剪图像而不是调整大小。在期待中感谢
答案 0 :(得分:2)
Inkscape不会为其生成的文件添加viewBox
属性。缩放工作需要该属性。
解决方案是将width
和height
值转换为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'属性会建立视口的高度。