RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1218085
Accepted
Proshka
Proshka
Asked:2021-12-13 18:21:34 +0000 UTC2021-12-13 18:21:34 +0000 UTC 2021-12-13 18:21:34 +0000 UTC

如何调整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 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    UModeL
    2021-12-13T18:57:19Z2021-12-13T18:57:19Z
    • 首先,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

相关问题

  • 字母S怎么画?

  • 在 svg 上绘制按钮

  • 将 viewBox 坐标转换为 svg 并将一个 svg 嵌入到另一个

  • 如何制作圆形箭头?

  • 如何消除 SVG 对象的大小限制不被模糊?

  • 为什么 SVG 不能在 iphone 上正确显示?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5