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

Question

请考虑我们有一个简单的 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 中的外观如下：

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

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

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

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

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

Live demo

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

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

其次，border-image 属性的机制和语法与 -webkit-mask-box-image 专有属性非常相似，使用它仍然是圆角包含绝对定位的子块的唯一方法（例如，Google Maps v3只能通过它在 Chrome 和 Safaries 中四舍五入）。当我们需要为 UI 元素设置一些棘手的轮廓时，这个属性在使用 Web 组件的移动开发中非常有价值。可悲的是，通过这个属性，它的 SVG 尺寸翻了一番，就像border-image。

更新。似乎这个问题可能是由 iOS 6.0 中引入的updated SVG processor 引起的：在视网膜上 SVG 尺寸以 CSS 像素计算，而坐标以视网膜像素计算。有somebugs跟踪与我的问题类似。

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>

Answer 2

忘记图片，你可以用简单的 css 做到这一点

.box {
  border: 10px solid #FACE8D;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #FFF;
  width: 50px;
  height: 50px;
}

从 iOS 3.2 开始支持 ...http://caniuse.com/border-radius

如果您需要图像以使边框具有图案，则可以简单地使用不透明的网络格式图像并在其上使用border-radius