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

Question

请考虑我们有一个简单的 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跟踪到与我的问题有相似之处。

Answer 1

鉴于您对 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>