SVG无法进行缩放

Question

我有一个SVG文件并在HTML代码中使用它。但不知何故，它无法缩放。我的意思是，我只能更改图像的宽度和高度（因此它只是变成了一个更大的占用更多空间的方框，但方框内部的矢量图像并没有缩放）。在SVG文件中，我有viewbox属性，但当我更改其值时，它仍然无法缩放（实际上它什么也没做）。有什么想法吗？

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="50px"
    height="50px"
    viewbox="0 0 64 64">
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
        <feMerge> 
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/> 
        </feMerge>
        </filter>
        <style type="text/css"><![CDATA[ .... ( data is here )

HTML：

<img id="icon">

（我在单独的js文件中指定img src）

- Petur Ulev

---

viewBox而非viewbox。SVG区分大小写。 - Robert Longson

Answer 1

如@Robert Longson的评论提到的那样，应该写成viewBox而不是viewbox。SVG区分大小写
调整SVG大小的方法：

第一种方法
使用以下代码：

<g transform="scale(0.1)">
...
</g>

第二条
视口框应描述SVG的完整宽度和高度。 视口框应该像这样：0 0 宽度 高度。

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

第三方
您可以通过在图像标记中筛选svg并以属性形式给出大小来调整其大小。

<img width="200px" src="yoursvg.svg"></img>

- Ahmed Ali

---

哇，这真的起作用了！我使用了你给出的第一种方法（使用 transform）像这样：<g transform=" translate(15,-10) scale(3)"> // 其他代码... 非常感谢你！！！ - Petur Ulev