gpt4 book ai didi

javascript - 在 Firefox 中渲染内联 SVG

转载 作者:数据小太阳 更新时间:2023-10-29 06:07:53 24 4
gpt4 key购买 nike

我有一个我正在开发的网站,我们允许创建形状,我们使用通过 javascript 构建的内联 svg 来创建形状。我遇到了一个奇怪的问题,svg 在 Chrome 中正确呈现,但在 Firefox 中它切掉了一部分 SVG。下面的代码是一个星号。在 chrome 中,这完美地显示出来。在 Firefox 中,我只能看到图像左上角的 25% 左右。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<body>

<svg shape-rendering="" preserveAspectRatio="none">
<polygon transform="rotate(0 100 100)" points="256.53212826312154,13.412653125,314.88080229627076,201.3216034012431,499.6516034012431,201.3216034012431,348.91752881560774,320.0009404178177,382.9542553349448,507.9098906940608,256.53212826312154,389.2305536774862,130.11000119129832,507.9098906940608,164.14672771063536,320.0009404178177,13.412653125,201.3216034012431,198.18345422997237,201.3216034012431,256.53212826312154,13.412653125" fill="rgb(49, 48, 255)" stroke="black" stroke-width="2.49125px" style="position: absolute; ">
</polygon>
</svg>

</body>
</html>

我不确定是我们做错了什么还是 Firefox 有问题。有趣的是,如果我将星星变小(比如这个星星大小的 1/4),它会在 Firefox 中完美呈现。

感谢您的帮助!

最佳答案

您需要在 <svg> 中添加 width 和 height 属性元素。 width="100%"和 height="100%"可能很适合您的情况。

关于javascript - 在 Firefox 中渲染内联 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10353443/

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