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)

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>