css - 增加 Inkscape SVG 的大小

标签 css svg image-resizing inkscape

因此,我使用 Inkscape 创建了这个基本的 SVG。我创建了一个新的“icon_32x32”,然后将其保存为“Plain SVG (*.svg)”。我将它嵌入到我的页面中:<embed src="~/Content/images/circle.svg" type="image/svg+xml" />

作为测试,我想尝试将其从 32x32 增加到 250x250。我正在阅读如何增加大小,并认为我正确地按照这些步骤操作,但为什么我的 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"
version="1.1"
id="svg2985"
width="250"
height="250"
viewbox="0 0 250 250"
preserveaspectratio="xMidYMid meet">
<defs
 id="defs2987">
 <marker
    refX="0"
    refY="0"
    orient="auto"
    id="Arrow2Lend"
    style="overflow:visible">
   <path
     d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
     transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
     id="path3981"
     style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
</marker>
</defs>
<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">
<path
   d="m 16.001558,18.25189 a 4.7833748,4.5634494 0 1 1 0,-9.1213392"
   transform="matrix(0.42504196,0,0,0.39488694,10.250724,10.593505)"
   id="path3767"
   style="fill:none;stroke:#ff0000;stroke-width:0.96631217;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
<g
 id="layer2">
<path
   d="m 8.6592145,8.2026817 a 1.9587629,2.5567009 0 1 1 0,-5.1063941"
   transform="matrix(-1.6047615,0,0,1.1886138,30.932625,9.2768872)"
   id="path3774"
   style="fill:none;stroke:#000000;stroke-width:1.50029838;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;marker-start:none;marker-mid:none" />
</g>
</svg>

最佳答案

您似乎已将某些文件转换为小写,这无效,因为 SVG 区分大小写。

viewbox="0 0 250 250"
preserveaspectratio="xMidYMid meet">

必须写

viewBox="0 0 250 250"
preserveAspectRatio="xMidYMid meet">

此外,如果您将 viewBox 恢复为 `viewBox="0 0 32 32"那么它应该显示更大,那么您可能已经更改了宽度/高度和 viewBox 大小,而您应该只更改宽度/高度.

宽度/高度控制绘图的大小,viewBox 控制内容覆盖的区域,即它缩放内容,所以如果你改变两者,你最终会得到一个更大的绘图缩小,即没有变化。

关于css - 增加 Inkscape SVG 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19711224/

相关文章:

php - 在这种情况下如何实现条件 CSS?

javascript - 窗口大小改变时如何防止div重叠?

html - IE 中的 Css calc() 行为

javascript - Firefox:shadow-DOM 兼容性

html - 如何使 HTML 表格图像适合窗口高度?

html - 缩小时渐变宽度增加?

html - 如何使 svg 图标和一些文本处于完美对齐状态?

d3.js - D3,tooltip位置,应用viewBox时

node.js - Node 使用 url 调整图像大小而不保存图像

html - 两张图片,一张调整大小,一张未调整大小