gpt4 book ai didi

html - SVG 作为视网膜屏幕上的边框图像

转载 作者:太空狗 更新时间:2023-10-29 14:16:15 26 4
gpt4 key购买 nike

请考虑我们有一个简单的 SVG 文件,其中包含圆 Angular 半径等于 10 的圆 Angular 矩形的代码:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" />
</svg>

这是它在 Chrome 中的样子:

现在我们使用这张图片作为 CSS 中 border-image 属性的值:

.box {
@include border-image(url('rounded-rectangle.svg') 10);
border-width: 10px;
background: #FFF;
width: 50px;
height: 50px;
}

现在让我们看看它在不同的浏览器和设备中的样子:太棒了,图像按预期跨越了元素的边界。

但是,当我们最终在配备视网膜屏幕的设备上查看这些内容时,我们得到了一些完全的废话:SVG 似乎增长了两倍。我们所看到的只是一个巨大的 Angular 落。

如果我们用类似的 PNG 替换那个 SVG,一切都很好。看一看(iOS 5.1 出于某种原因用图像颜色绘制了元素的内部部分,但是,这不是本题的主题):

Live demo

问题是:这可以处理吗?也许,我有一些错误的 SVG?或者我需要用一些棘手的东西设置视口(viewport)元标记以阻止 border-image 缩放?

这个问题很重要。首先,SVG 的流行主要是因为视网膜。它是装饰事物的工具,不用担心它们在双倍像素上看起来像垃圾。

其次,border-image 属性的机制和语法与 -webkit-mask-box-image 专有属性非常相似,使用它仍然是包含绝对定位子项的 block 的 Angular 的唯一方法(例如,谷歌地图 v3 只能通过它在 Chromes 和 Safaries 中进行舍入)。当我们需要为 UI 元素设置一些棘手的轮廓时,此属性在使用 Web 组件的移动开发中非常有值(value)。遗憾的是,通过此属性,它的 SVG 尺寸加倍,就像 border-image 一样。

更新。 看来这个问题可能是由 updated SVG processor 引起的在 iOS 6.0 中引入:在视网膜上,SVG 尺寸以 CSS 像素计算,而坐标以视网膜像素计算。有some bugs跟踪到与我的问题有相似之处。

最佳答案

鉴于您对 iOS6 错误的更新,这种方法可能有效:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect fill="#FACE8D" x="0" y="0" width="100%" height="100%" rx="10%" ry="10%" />
</svg>

关于html - SVG 作为视网膜屏幕上的边框图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17384172/

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