如何使 svg pic 垂直和水平缩放答案

【问题标题】：How to make a svg pic scale vertiacally an horizontally如何使 svg pic 垂直和水平缩放
【发布时间】：2020-03-30 08:52:44
【问题描述】：

This is what in may.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="288.000000pt" height="143.000000pt" viewBox="0 0 288.000000 143.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,143.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2021 1404 c-73 -20 -147 -58 -204 -105 l-47 -40 -63 25 c-98 39
-219 56 -399 56 -214 0 -370 -34 -462 -102 -27 -19 -33 -20 -80 -8 -77 18
-285 25 -358 11 -110 -22 -167 -42 -211 -75 -48 -36 -71 -77 -62 -107 10 -31
64 -88 99 -105 31 -14 31 -14 6 3 -55 38 -90 81 -90 109 0 46 66 98 162 130
76 25 96 28 248 28 106 0 181 -4 209 -13 42 -12 46 -11 125 28 100 50 169 69
313 83 85 9 142 8 230 0 113 -11 264 -46 311 -71 20 -11 28 -7 70 28 81 68
150 93 276 99 166 7 268 -23 361 -109 56 -52 75 -93 75 -166 l0 -59 70 -17
c82 -22 182 -83 210 -129 25 -42 25 -88 0 -138 -25 -49 -70 -83 -163 -124
l-73 -32 28 -27 c35 -35 36 -66 2 -107 -55 -64 -195 -110 -338 -110 l-73 0 -7
-38 c-10 -68 -56 -117 -148 -161 -103 -49 -180 -68 -330 -82 -192 -19 -399 10
-543 76 -81 36 -137 82 -155 125 l-13 30 -48 -45 c-106 -99 -248 -140 -453
-132 -191 7 -300 49 -394 151 -48 52 -66 102 -60 168 3 32 2 46 -4 40 -6 -6
-12 -39 -15 -74 -10 -124 53 -211 211 -289 98 -48 155 -59 300 -59 173 0 291
41 408 142 36 31 58 44 58 35 0 -29 87 -112 151 -143 141 -70 238 -88 474 -88
155 0 179 2 270 27 119 33 186 64 243 113 49 42 72 81 72 122 0 29 0 29 77 36
178 16 307 63 351 126 29 44 28 69 -7 117 l-30 41 46 12 c58 17 154 79 182
118 39 56 45 88 26 137 -28 75 -131 146 -250 174 l-50 12 0 72 c0 79 -10 101
-74 170 -95 102 -305 153 -460 111z"/>
<path d="M285 930 c3 -5 8 -10 11 -10 2 0 4 5 4 10 0 6 -5 10 -11 10 -5 0 -7
-4 -4 -10z"/>
<path d="M70 798 c-16 -22 -30 -49 -30 -59 0 -9 21 -44 48 -77 36 -47 50 -58
60 -49 11 9 6 18 -26 46 -68 61 -75 89 -37 145 34 50 22 46 -15 -6z"/>
<path d="M81 558 c-14 -23 -14 -23 8 -4 22 20 25 26 13 26 -4 0 -13 -10 -21
-22z"/>
</g>
</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="may.css">
  </head>
<body>

  <svg width="1000" height="1000">
<g class=flex >


<image href="may.svg" width="100" height="700"></image>

</g>
  
</svg>
 
</body>
</html>

我有一个 svg 图片，我想像这样垂直和水平缩放它 enter image description here 到这个

enter image description here 我试过viewbox，但它只能水平缩放如果有帮助，这是我的 html

  <svg width="1000" height="1000">
<g class=flex >
<image href="may.svg" width="100" height="700"></image>
</g>
</svg>
</body>

如果我改变我的 svg 图片的高度和宽度，它只会改变图片的宽度和高度及其比例。如何以我自己的宽度和高度比显示我的 svg 图像

我应该使用什么方法。谢谢

【问题讨论】：

我们无法从光栅图像诊断问题。请编辑您的问题以包含minimal reproducible example，最好是Stack Snippet
抱歉给您带来不便，我编辑了我的帖子。你还有什么想知道的。对不起我的英语不好
may.svg 中有什么？您可以使用 Stack Snippet 以便我们运行它并查看问题的演示吗？
我编辑了我的帖子，有帮助吗？
sn-p 有水平和垂直滚动条。这到底是什么问题？

标签： html svg scale viewbox mindmap

【解决方案1】：

使用SVG fragment identifier 例如

<image href="may.svg#svgView(viewBox(0,0,200,200))" width="100" height="700"></image>

使用任何合适的数字。

【讨论】：

是否 preserveAspectRatioSpec 与属性一起使用