Question

我想要一个SVG图像，其宽度为父div，高度应为其宽度的14％。

此代码适用于Firefox，但不适用于Chrome：

<svg 
    xml:space="preserve"
    preserveAspectRatio="xMinYMin meet"
    height="100%" width="100%"
    viewBox="-1 -10 242 33">
    ...
</svg>

在Chrome中，宽高比为1，因此svg内容位于正方形的顶部，下方有很多空白。我需要svg文件内联，因此我无法使用img标记。

Answer 1

如果您从SVG中删除height和width属性但保留viewBox，那么它将按比例缩放到其父容器的大小。例如，以下标记在不同宽度的<div>容器中生成三个SVG图像。在每种情况下，SVG都会扩展到其父容器的宽度。

这对我来说在Chrome中运行良好。

<div style="width:200px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=200px</text
  </svg>
</div>
<div style="width:300px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=300px</text
  </svg>
</div>
<div style="width:400px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=400px</text
  </svg>
</div>

将SVG的大小调整为其父宽度的100％并保持其宽高比

1 个答案: