缩放 svg 以设置宽度 (px) 和自动高度

Question

我似乎不明白svg。我希望有人向我解释我哪里出错了。所以我有一个内联 svg：

  <div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image"><use xlink:href="#myId" />
      <symbol id="myId" viewBox="0 0 1000 700">
        <ellipse cx="200" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
      </symbol>  
    </svg>
  </div>

div 的宽度设置为 1000px。svg 设置为 100% 宽度。它有一个视图框。我现在希望 svg 的宽度缩放 100%，这意味着宽度为 1000px，然后相应地调整高度，因为它对div 和 svg 本身都设置为自动。我希望这样，因为我提供了一个视图框。我哪里出错了？

这是 css：

._image  {
  width: 100%;
  height: auto;
}

。一切都放在一个小提琴上：https://jsfiddle.net/hv6ejn98/2/

Answer 1

svg 设置为 100% 宽度。它有一个视图框。

不，它没有。只有您的<symbol>可以。 如果没有viewBox您的 SVG 将无法缩放。 如果向 SVG 添加viewBox，则一切将按预期工作。

<div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image" viewBox="0 0 1000 700"><use xlink:href="#myId" />
      <symbol id="myId" viewBox="0 0 1000 700">
        <ellipse cx="200" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
      </symbol>  
    </svg>
  </div>