我怎样才能使用其父容器进行SVG缩放？
我想有一个内联svg元素的内容时，尺寸是非本地的规模。 当然，我可以把它作为一个单独的文件，并像这样扩展。
index.html： <img src="foo.svg" style="width: 100%;" /> <img src="foo.svg" style="width: 100%;" />
foo.svg： <svg width="123" height="456"></svg>
不过，我想添加额外的样式到SVG通过CSS，所以链接外部的不是一个选项。 如何制作内联SVG缩放？
要在SVG图像中指定独立于图像缩放大小的坐标，请使用SVG元素上的viewBox属性来定义图像的边界框在图像的坐标系中，并使用width和height属性来定义相对于包含页面的宽度或高度。
例如，如果您有以下情况：
<svg> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
它将呈现为10px×20px的三angular形：
现在，如果只设置宽度和高度，则会更改SVG元素的大小，但不会缩放三angular形：
<svg width=100 height=50> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
如果设置了视图框，则会导致图像变形，使得给定的框（在图像的坐标系中）被放大以适合给定的宽度和高度（在页面的坐标系中）。 例如，要将三angular形放大为100px乘50px：
<svg width=100 height=50 viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
如果要将其缩放到HTML视口的宽度，请执行以下操作：
<svg width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
请注意，默认情况下，宽高比保留。 所以如果你指定这个元素的宽度应该是100％，而高度是50px，那么它实际上只能放大到50px的高度（除非你有一个非常窄的窗口）：
<svg width="100%" height="50px" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
如果您确实想要水平拉伸，请使用preserveAspectRatio=none禁用长宽比保存：
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg>
（请注意，虽然在我的例子中，我使用了可用于HTMLembedded的语法，将示例作为一个图像包含在StackOverflow中，但我将其embedded到另一个SVG中，所以我需要使用有效的XML语法）
你会想要做一个这样的变换：
使用JavaScript：
document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");
使用CSS：
#yourtarget { transform:scale(2.0); -webkit-transform:scale(2.0); }
将SVG页面包裹在组标记中，并将其作为操作整个页面的目标：
<svg> <g id="yourtarget"> your svg page </g> </svg>
注意 ：Scale 1.0是100％
乱七八糟，发现这个CSS似乎包含在Chrome浏览器中的SVG，直到容器大于图像：
div.inserted-svg-logo svg { max-width:100%; }
也似乎在FF + IE 11中工作。
