SVG 在视网膜屏幕上作为边框图像

请考虑我们有简单的 SVG 文件，其中包含圆角半径等于 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 中的样子如下：

现在我们使用这个图像作为值border-imageCSS 中的属性：

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

现在让我们看看它在不同浏览器和设备中的样子：太棒了，图像按预期延伸到了元素的边界。

然而，当我们最终在带有视网膜屏幕的设备上查看这些内容时，我们得到了一些完全糟糕的结果：SVG 似乎增长了一倍。我们所看到的只是一个巨大的角落。

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

现场演示 http://cssdeck.com/labs/border-image-png-svg

问题是：这能处理吗？也许，我有一些错误的 SVG？或者我需要用一些棘手的东西来设置视口元标记来停止border-image来自缩放？

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

其次，它的机制和语法border-image属性非常相似-webkit-mask-box-image专有属性，使用它仍然是对包含绝对定位子项的块进行圆角处理的唯一方法（例如，Google 地图 v3 只能通过它在 Chrome 和 Safari 中进行圆角处理）。当我们需要为 UI 元素设置一些棘手的轮廓时，这个属性在使用 Web 组件的移动开发中非常有价值。遗憾的是，通过这个属性，它的 SVG 尺寸加倍，就像border-image.

UPDATE.看来这个问题可能是由更新的 SVG 处理器 https://bugs.webkit.org/show_bug.cgi?id=93772iOS 6.0 中引入：在视网膜上，SVG 尺寸以 CSS 像素计算，而坐标以视网膜像素计算。有some https://bugs.webkit.org/show_bug.cgi?id=93772 bugs https://bugs.webkit.org/show_bug.cgi?id=94377跟踪与我的问题有类似之处。

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