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中的样子:

现在我们将此图像用作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由于某种原因用图像颜色绘制元素的内部部分,但是,这不是这个问题的主题):

现场演示

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

这个问题非常重要.首先,SVG很受欢迎,主要是因为视网膜.它是装饰东西的工具,而不用担心它们看起来像双倍像素上的垃圾.

其次,border-image属性的机制和语法与-webkit-mask-box-image专有属性非常相似,使用它仍然是围绕包含绝对定位子项的块的角落的唯一方法(例如,Google Maps v3只能通过Chromes和Safaries进行舍入它).当我们需要为UI元素设置一些棘手的轮廓时,这个属性在使用Web组件的移动开发中非常有价值.可悲的是,通过这个属性加倍它的SVG尺寸就像border-image.

UPDATE.似乎这个问题可能是由iOS 6.0中引入的更新的SVG处理器引起的:在视网膜SVG尺寸是用CSS像素计算的,而坐标是用视网膜计算的.有一些 错误追踪跟我的问题类似的东西.

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>