gpt4 book ai didi

SVG viewBox 不适用于负位置的嵌套 svg

转载 作者:行者123 更新时间:2023-12-04 22:23:50 27 4
gpt4 key购买 nike

在这个例子中,绿色圆圈被切断

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<svg width="500" height="500" x="0" y="0"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
<svg width="500" height="500" x="0" y="0"><circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" /></svg>
</svg>
</body>
</html>

见: http://jsfiddle.net/sCzZT/

请注意,每个圆圈都包裹在自己的 svg

在这个例子中(没有嵌套的 svgs),绿色圆圈没有被切断
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
</body>
</html>

http://jsfiddle.net/jVH9q/
使用嵌套 svgs 时如何让绿色圆圈不被切断?

最佳答案

内部 svg 有一个默认视口(viewport),即 0、0、500、500(x、y、宽度、高度),默认情况下,溢出该区域的任何内容都会被隐藏/裁剪。

你可以做几件事...

  • 在内部 svg 元素上添加一个 overflow="visible"属性
  • 更改 x、y 值,使圆圈位于视口(viewport)内
  • 添加一个 viewBox 以便您定义一个显式视口(viewport),以显示您希望在内部 svg 中看到的区域。
  • 关于SVG viewBox 不适用于负位置的嵌套 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9163475/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com