gpt4 book ai didi

internet-explorer - 为什么这个 SVG 图形在 IE9 和 10(预览版)中不缩放?

转载 作者:太空狗 更新时间:2023-10-29 13:33:42 24 4
gpt4 key购买 nike

根据 IE website支持 SVG。也根据这个答案What are SVG (Scalable Vector Graphics) supported browsers?

http://jsfiddle.net/jitendravyas/2UWNe/show/

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<linearGradient id="button_surface" gradientUnits="objectBoundingBox"
x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#434343" offset="0"/>
<stop stop-color="#000000" offset="0.67"/>
</linearGradient>

<linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
<stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
</linearGradient>
</defs>

<!-- button content -->
<rect x="10" y="10" rx="15" ry="15" width="150" height="80"
fill="url(#button_surface)" stroke="#363636"/>

<text x="30" y="55" fill="white"
font-family="Tahoma" font-size="20" font-weight="500">
SVG Button
</text>

<!-- vitual lighting effect -->
<rect x="12" y="12" rx="15" ry="15" width="146" height="76"
fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

最佳答案

IE 似乎对丢失的 preserveAspectRatio 处理不当属性。您可以通过添加 preserveAspectRatio="xMinYMin slice" 使其在 IE 中缩放,如下所示: http://jsfiddle.net/2UWNe/4/show

但是,IE 显示的不是正确的行为,因此此更改导致其他浏览器的行为与 IE 不同。 (但是,Microsoft believes that they support preserveAspectRatio。)

我没有深入研究您的单位或内容边界框。您真正想要达到什么效果?

关于internet-explorer - 为什么这个 SVG 图形在 IE9 和 10(预览版)中不缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7711641/

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