SVG作为边界图像在视网膜屏幕上 [英] SVG as border-image on retina screens

问题描述

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

Please consider we have simple SVG file, containing code for rounded rectangle which corner radius equals 10:

<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中的显示效果如下：

Here how it looks like in Chrome:

现在我们将此图片用作CSS中的 border-image 属性值：

Now we use this image as a value for border-image property in CSS:

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

现在让我们来看看它在不同的浏览器和设备上的样子：

Now let's take a look on how it looks like in different browsers and devices: brilliant, the image stretched across element's boundaries as expected.

然而，当我们最终在具有视网膜屏幕的设备上查看这些图像时，我们得到了一些全面的：SVG似乎生长了两次。

However, when we end up viewing those on devices with retina screens, we've got some total crap: SVG seems to be grown twice. All we see is one enormous corner.

如果我们用类似的PNG替换SVG，一切都很好。看看（iOS 5.1由于某种原因用图像颜色描绘了元素的内部部分，但是，这不是此问题的主题）：

If we replace that SVG with a similar PNG, everything is fine. Take a look (iOS 5.1 painted the inner parts of elements with the image color for some reason, however, this is not a subject of this question):

演示

问题是：与？也许，我有一些错误的SVG？或者我需要设置视口元标记一些棘手的东西，停止 border-image 从缩放

The question is: can this be dealt with? Maybe, I've got some wrong SVG? Or I need to set the viewport meta-tag with some tricky stuff to stop border-image from scaling?

这个问题很重要。首先，SVG是受欢迎的主要是因为视网膜。

The problem is quite important. First of all, SVG is being popular mostly because of retinas. It is the tool to decorate things without being worried they would look like crap on doubled pixels.

其次， border-style的机制和语法， image 属性非常类似于 -webkit-mask-box-image 专有属性，使用它仍然是块边角的唯一方法其中包含绝对定位的儿童（例如，Google地图v3只能通过Chromes和Safiary四舍五入）。当我们需要为UI元素设置一些棘手的轮廓时，这个属性在web组件的移动开发中非常有价值。可悲的是，这个属性使它的SVG尺寸加倍，就像 border-image 。

Secondly, the mechanics and syntax of the border-image property is quite similar to the -webkit-mask-box-image proprietary property, using which is still the only way to round corners of blocks which contain absolutely positioned children (for example, Google Maps v3 can be rounded in Chromes and Safaries only through it). And this property is very valuable in mobile development with web components, when we need to set some tricky contour to an UI element. Sadly, by this property doubles it's SVG dimensions just like border-image.

UPDATE。 strong>看来，此问题可能是由iOS中引入的更新的SVG处理器引起的6.0：在视网膜上SVG尺寸是在CSS像素中计算的，而坐标是在视网膜中计算的。有一些 bugs 跟我的问题类似。

UPDATE. Seems that this issue may be caused by updated SVG processor introduced in iOS 6.0: on retina SVG dimensions are computed in CSS pixels, while the coordinates are computed in retina ones. There are some bugs tracked that have something similar with my issue.

推荐答案

鉴于您对iOS6错误的更新，此方法可能有效：

Given your update about iOS6 bugs, this approach might work:

<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>

这篇关于SVG作为边界图像在视网膜屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！