Question

我试图通过javascript修改svg对象的过滤器。鼠标悬停应使灰色阴影变为红色。

问题是Chrome和Safari没有任何效果，但Firefox确实如此。当我单步执行Javascript调试器时，我能够让Safari做正确的事情，所以我担心这可能是我不能控制的webkit的时间问题。

我的目标是找到一个解决方案，允许所有3个浏览器在javascript中更新过滤器。

Safari 11.1， Chrome 65.0.3325.181， Firefox 59.0.2

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="250" height="150">
    <defs>
        <filter id=glow x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx=2 dy=2 stdDeviation=2 flood-color="#F00" />
        </filter>
        <filter id=shadow x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx=2 dy=2 stdDeviation=2 flood-color="#888" />
        </filter>
    </defs>
    <g style="filter: url(#shadow)">
        <rect x=50 y=50 width=50 height=50 style="fill: yellow"
            onmouseover="this.parentNode.style.filter = 'url(#glow)'"
            onmouseout="this.parentNode.style.filter = 'url(#shadow)'" />
    </g>
    <g style="filter: url(#shadow)">
        <rect x=150 y=50 width=50 height=50 style="fill: green"
            onmouseover="this.parentNode.style.filter = 'url(#glow)'"
            onmouseout="this.parentNode.style.filter = 'url(#shadow)'" />
    </g>
</svg>
</body>
</html>

相关Codepen： https://codepen.io/anon/pen/yjeXMJ?editors=1000

Answer 1

如果删除.parent选择器：

<item>
    <title>Post Title</title>
    <link>http://example.com/</link>
    <pubDate>Sun, 22 Apr 2018 16:35:09 +0000</pubDate>
     <dc:creator><![CDATA[lubandi]]></dc:creator>
        <category><![CDATA[Bobi Wine]]></category>

    <guid isPermaLink="false">http://example.com/</guid>
    <description><![CDATA[Source: AUDIO LAD]]></description>
<field>Custom field value here</field>
</item>

它适用于chrome。希望它有所帮助。

通过javascript进行SVG过滤更新在浏览器中不一致

1 个答案: