7

请考虑我们有一个简单的 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，使用它仍然是圆角包含绝对定位的子块的唯一方法（例如，谷歌地图 v3 只能在 Chrome 和 Safari 中通过它）。当我们需要为 UI 元素设置一些棘手的轮廓时，这个属性在使用 Web 组件的移动开发中非常有价值。可悲的是，通过这个属性，它的 SVG 尺寸加倍，就像border-image.

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

4

2 回答 2

3

鉴于您对 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>
于 2013-09-06T06:16:01.170 回答
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

如果您需要图像以使边框具有图案，则可以简单地使用没有透明度的 Web 格式图像并在其上使用边框半径

于 2013-09-11T10:03:08.740 回答