Question

这是一种魔术，但是在svg上出现的Safari阴影下，我面临一种奇怪的行为。似乎它不想正常处理feDropShadow，就像浏览器的其余部分一样（例如Chrome）。这样会使人物变得模糊不清，看起来也不清晰。

因此，如果同时在Safari和Chrome中运行我的代码段，则放大后将完全看到svg stars之间的差异。

我也看到了这些帖子，但它们无关紧要：

要重现的一些代码：

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " stroke="transparent" stroke-width="0" width="34" height="34" viewBox="-2.3 -2.1 9 9" 

fill="url(#sidebar_svg_gradient_regular_desktop_gold)"
filter="url(#svg_sidebar_green_regular_desktop_gold_filter)"


>
<filter id="svg_sidebar_green_regular_desktop_gold_filter">
	<feDropShadow dx="0" dy="0" flood-color="#f4b701" stdDeviation="1.2"></feDropShadow>
</filter>

<linearGradient id="sidebar_svg_gradient_regular_desktop_gold" gradientTransform="rotate(90)" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f4b701"></stop><stop offset="1" stop-color="#b08505"></stop></linearGradient>


<path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path>

</svg>
 
</body>
</html>

更新

根据2013年至今仍未发布的报告，{web}引擎内核本身似乎隐藏着一个问题：https://bugs.webkit.org/show_bug.cgi?id=119300

我为我的案件找到了解决方案。它并不完美，但可以完全适用于Safari：https://github.com/artdecocode/daily-log/blob/master/shadow.md

资源：SVG: Drop-Shadow filter pixelates SVG on mobile Safari

SVG的<feDropShadow />在Safari和其他浏览器中看起来有所不同（模糊）

0 个答案: