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％宽度。它有一个viewBox。我现在希望svg在宽度上缩放100％，这意味着宽度为1000px，然后相应地调整高度，因为它对div和svg本身都设置为auto。我期待这一点，因为我提供了一个视图框。我哪里错了？

这是css：

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

......所有的东西都放在一起作为小提琴：https://jsfiddle.net/hv6ejn98/2/

Answer 1

svg设置为100％宽度。它有一个viewBox。

不，不。只有你的<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>

缩放svg以设置宽度（px）＆amp;自动高度

1 个答案: