主页 / 问题 / 1218085
Accepted
Proshka
Asked:2021-12-13 18:21:34 +0800 CST2021-12-13 18:21:34 +0800 CST

如何调整svg的大小

  • 772

如何调整这个svg的大小？更改宽度和高度会导致图像消失/裁剪

<?xml version="1.0" ?>
<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title/>
            <g fill="#fff" id="svg_1" transform="translate(-10,1024) scale(0.1,-0.1) ">
                <path d="m4820,9439c-1036,-77 -1981,-503 -2723,-1228c-976,-952 -1444,-2300 -1271,-3654c216,-1693 1410,-3103 3050,-3602c1268,-386 2679,-157 3754,608c1321,941 2008,2502 1804,4100c-216,1693 -1410,3103 -3050,3602c-488,149 -1057,212 -1564,174zm331,-2689c222,-22 333,-57 383,-122c13,-18 34,-62 46,-98c26,-76 27,-163 11,-813c-10,-406 -4,-531 29,-621c39,-103 125,-150 201,-111c69,36 230,213 335,370c243,360 391,639 569,1070c36,85 84,141 134,154c20,6 303,11 651,12l615,2l52,-22c67,-30 93,-69 93,-140c0,-135 -141,-412 -383,-751c-33,-47 -158,-213 -277,-370c-263,-346 -320,-427 -360,-511c-50,-106 -38,-193 41,-296c23,-29 139,-146 258,-260c333,-319 484,-487 607,-671c88,-133 122,-231 108,-315c-7,-46 -53,-101 -105,-128c-62,-31 -157,-37 -680,-44l-495,-7l-80,27c-204,68 -340,181 -649,539c-171,198 -298,295 -386,296c-81,0 -184,-108 -228,-242c-30,-90 -41,-159 -50,-315c-11,-184 -33,-227 -146,-274c-41,-18 -551,-24 -686,-10c-271,30 -522,115 -771,262c-361,212 -582,402 -819,704c-412,526 -693,974 -1034,1650c-132,263 -287,603 -312,684c-25,84 11,153 93,179c28,9 184,14 544,19l505,5l59,-22c93,-36 132,-82 195,-235c54,-129 345,-713 436,-876c93,-165 192,-303 277,-385c105,-103 152,-128 226,-122c63,6 80,20 119,105c95,205 110,898 25,1170c-49,155 -122,214 -324,257c-35,8 -35,20 -3,67c78,112 217,166 482,188c145,12 575,13 694,1z" fill="#61B7B0" id="svg_2"/>
            </g>
    </g>
</svg>

svg

1 个回答

  1. Best Answer
    • 首先，viewBox使用图像的原始尺寸进行设置；
    • 其次，从属性中删除width和；height
    • 第三，在 CSS 或style.

    img {
  width: 150px; height: 150px;
  border: 1px dashed red;
}
/*
svg {
  width: 150px; height: 150px;
  border: 1px dashed red;
}
*/
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="width: 150px; height: 150px; border: 1px dashed red;">
  <g transform="translate(-10,1024) scale(0.1,-0.1)">
    <path fill="#61B7B0" d="m4820,9439c-1036,-77 -1981,-503 -2723,-1228c-976,-952 -1444,-2300 -1271,-3654c216,-1693 1410,-3103 3050,-3602c1268,-386 2679,-157 3754,608c1321,941 2008,2502 1804,4100c-216,1693 -1410,3103 -3050,3602c-488,149 -1057,212 -1564,174zm331,-2689c222,-22 333,-57 383,-122c13,-18 34,-62 46,-98c26,-76 27,-163 11,-813c-10,-406 -4,-531 29,-621c39,-103 125,-150 201,-111c69,36 230,213 335,370c243,360 391,639 569,1070c36,85 84,141 134,154c20,6 303,11 651,12l615,2l52,-22c67,-30 93,-69 93,-140c0,-135 -141,-412 -383,-751c-33,-47 -158,-213 -277,-370c-263,-346 -320,-427 -360,-511c-50,-106 -38,-193 41,-296c23,-29 139,-146 258,-260c333,-319 484,-487 607,-671c88,-133 122,-231 108,-315c-7,-46 -53,-101 -105,-128c-62,-31 -157,-37 -680,-44l-495,-7l-80,27c-204,68 -340,181 -649,539c-171,198 -298,295 -386,296c-81,0 -184,-108 -228,-242c-30,-90 -41,-159 -50,-315c-11,-184 -33,-227 -146,-274c-41,-18 -551,-24 -686,-10c-271,30 -522,115 -771,262c-361,212 -582,402 -819,704c-412,526 -693,974 -1034,1650c-132,263 -287,603 -312,684c-25,84 11,153 93,179c28,9 184,14 544,19l505,5l59,-22c93,-36 132,-82 195,-235c54,-129 345,-713 436,-876c93,-165 192,-303 277,-385c105,-103 152,-128 226,-122c63,6 80,20 119,105c95,205 110,898 25,1170c-49,155 -122,214 -324,257c-35,8 -35,20 -3,67c78,112 217,166 482,188c145,12 575,13 694,1z"/>
  </g>
</svg>

<img src="data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-10,1024) scale(0.1,-0.1)'%3E%3Cpath fill='%2361B7B0' d='m4820,9439c-1036,-77 -1981,-503 -2723,-1228c-976,-952 -1444,-2300 -1271,-3654c216,-1693 1410,-3103 3050,-3602c1268,-386 2679,-157 3754,608c1321,941 2008,2502 1804,4100c-216,1693 -1410,3103 -3050,3602c-488,149 -1057,212 -1564,174zm331,-2689c222,-22 333,-57 383,-122c13,-18 34,-62 46,-98c26,-76 27,-163 11,-813c-10,-406 -4,-531 29,-621c39,-103 125,-150 201,-111c69,36 230,213 335,370c243,360 391,639 569,1070c36,85 84,141 134,154c20,6 303,11 651,12l615,2l52,-22c67,-30 93,-69 93,-140c0,-135 -141,-412 -383,-751c-33,-47 -158,-213 -277,-370c-263,-346 -320,-427 -360,-511c-50,-106 -38,-193 41,-296c23,-29 139,-146 258,-260c333,-319 484,-487 607,-671c88,-133 122,-231 108,-315c-7,-46 -53,-101 -105,-128c-62,-31 -157,-37 -680,-44l-495,-7l-80,27c-204,68 -340,181 -649,539c-171,198 -298,295 -386,296c-81,0 -184,-108 -228,-242c-30,-90 -41,-159 -50,-315c-11,-184 -33,-227 -146,-274c-41,-18 -551,-24 -686,-10c-271,30 -522,115 -771,262c-361,212 -582,402 -819,704c-412,526 -693,974 -1034,1650c-132,263 -287,603 -312,684c-25,84 11,153 93,179c28,9 184,14 544,19l505,5l59,-22c93,-36 132,-82 195,-235c54,-129 345,-713 436,-876c93,-165 192,-303 277,-385c105,-103 152,-128 226,-122c63,6 80,20 119,105c95,205 110,898 25,1170c-49,155 -122,214 -324,257c-35,8 -35,20 -3,67c78,112 217,166 482,188c145,12 575,13 694,1z'/%3E%3C/g%3E%3C/svg%3E">

    在回答这个问题时，我发现了一个表面上的细微差别，但仍然不是那么明显。也许有人会有用。

    SVG和camelCase

    很多时候，在编写和/或编辑 SVG 代码时，我们会使用某种带有代码编辑器或在线编辑器的 IDE。即时查看和调试代码很方便。但是，在使用此类工具时需要小心。

    这一切都与 SVG 在这种环境中如何连接到预览有关。

    SVG 代码本质上是 XML 标记，区分大小写。因此，您需要知道如何正确编写标签名称、属性名称、属性和参数。如果您不确定所写内容的正确性，那么最好立即查看参考书。否则，一个错字可能会变成对未来问题的长期搜索。在这里，编辑器中的预览可以欺骗我们（尤其是在线编辑器）。

    用于预览 SVG 代码的理想选项是将此代码保存到 *.svg 文件中，然后通过<img>、<object>或<iframe>,background-image: url()但是...<svg>连接到 HTML 文档中。问题是什么？

    HTML 和 XML 尽管有外部相似性，但仍然有很大不同。因此，不同的解析器会以不同的方式处理。这就是细微差别出现的地方，为此有很多字母。

    外部 svg 文件和 Base64 编码的 svg 由 XML 解析器解析，inline-svg 由 HTML 解析器解析。

    如您所知，HTML 不仅对标签是大小写友好的，而且对属性也是如此。这就是为什么用错误编写的 svg 代码很容易被跳过并在预览中工作的原因。但是，被复制到一个外部文件，一个更严格的 XML 解析器已经可以处理它，它不会容忍这样的耻辱。

    谨慎选择编辑器和预览工具。记住基本标签和属性的拼写，多参考参考书。如果可能，通过将代码保存在单独的文件中并通过适当的标签包含它来检查代码。

    感谢@MaximLensky激励我去探索。

    • 5

相关问题