使用百分比而不是缩放的内联svg

我正在尝试设计一个SVG标志，它由几个矩形组成，这些矩形横跨100%的水平可用屏幕，中间有一个SVG标志。我希望它是响应，我使用的百分比无处不在，除了中间的标志，我正在使用的SVG内联代码，而不是百分比。我无法使徽标缩放或居中。下面是HTML文件中SVG的精简版本

`

---

`请查看下面的代码。这就是你想做的吗

您必须以一定的尺寸绘制SVG，并将viewBox设置为这些尺寸。我刚买了100 x 60

然后可以使宽度和高度相对。在您的情况下，通过设置width=“100%”将其拉伸到容器的宽度

文件

Oops:缺少第一行：“”百分比在viewBox属性中无效。只有原始数字。当你说你不能让徽标缩放和居中时，你的意思是你希望徽标占总尺寸的百分比，还是只是在窗口居中？

<svg xmlns="http://www.w3.org/TR/SVG11" width="100%" height="100%"       
    viewBox="0% 0% 100% 100%" >
<rect x="0&" y="0%" width="100%" height="100%" fill="yellow"/>
<use href="#logo" x=50% y=50% width="100%" height="100%" fill="blue" />
</svg>

<svg xmlns="http://www.w3.org/TR/SVG11" viewBox="0 0 100 100">
<def>
<g id="logo">
<rect x="0" y="0" width="100" height="100"/>
</g>
</def>
</svg>

</body>
</html>