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专有属性非常相似，使用它仍然是围绕包含绝对定位子项的块的角的唯一方法（例如，谷歌地图v3只能通过它在Chromes和Safaries中进行四舍五入。当我们需要为UI元素设置一些棘手的轮廓时，这个属性在使用Web组件的移动开发中非常有价值。可悲的是，通过这个属性，它的SVG尺寸加倍，就像border-image。

更新。似乎此问题可能是由iOS 6.0中引入的updated SVG processor引起的：在视网膜上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>

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

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

2 个答案: