时间戳

首页 > 解决方案 > SVG类在 Safari 中不起作用

svg - SVG类在 Safari 中不起作用

问题描述

我在 Safari 中使用该<image>元素。<svg>

虽然<image>在 Chrome 中显示，但在 Safari 中不显示。

这是我的代码

.swatch {
  width: 10rem;
}

.swatch-base {
  width: 100%;
  height: 100%;
}

.filter-swatch {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">

<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0"></image> 

<rect class="filter-swatch" fill="#ecd5cf"></rect>
  
</svg>

请注意，在我的代码中，我已经内联了图像，因此没有使用外部资源，因此当图像不再存在于我的服务器上时，这个答案仍然有用。但在生产中，我引用的是图像而不是内联它。

如何显示 Chrome 中显示的图像？

标签： svgsafarimobile-safari

解决方案

对于 Safari，图像上的宽度和高度必须指定为属性，而不是通过 CSS。

在图像上使用 CSS 是 SVG 2 中的新功能，Safari 还没有实现 SVG 2 的这一部分。

.swatch {
  width: 10rem;
}

.filter-swatch {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">

<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0" width="100%" height="100%"></image> 

<rect class="filter-swatch" fill="#ecd5cf"></rect>
  
</svg>

推荐阅读