Question

我使用svg绘制了圆圈。并绑定窗口调整大小事件。实际svg圆半径为200，svg宽度和高度值为500.当调整窗口大小时，应使用缩放调整大小。同时增加窗口大小并减小窗口大小。如何实现这个目标？

<body onresize="myFunction()">
<svg id='circle' height="500" width="500">
  <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>

function myFunction(){
    var element = document.getElementById('circle');
    element.setAttribute('transform', 'scale(0.9)')   
}

示例链接：https://jsfiddle.net/fNPvf/42891/

Answer 1

如果你想要SVG扩展，它需要有一个viewBox。尝试：

viewBox="0 0 500 500"

function myFunction() {
    var element = document.getElementById('circle');
    element.setAttribute('transform', 'scale(0.9)')   
}

<body onresize="myFunction()">
  <svg id='circle' width="500px" viewBox="0 0 500 500">
    <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>

Example JSFiddle

但是你为什么要尝试在自己调整大小的窗口上调整SVG的大小？为什么不让浏览器为你做呢？

<svg id='circle' width="50%" viewBox="0 0 500 500">
  <circle cx="250" cy="250" r="200" stroke="black" stroke-width="3" fill="red" />
</svg>

Example JSFiddle

如何使用缩放变换调整svg元素的大小

1 个答案: