Question

我有这些图标，我想在程序上添加一个投影（基本上，某些东西，任何东西）在悬停时它们看起来不那么好看。

它们是SVG的，所以理论上我可以预先设置这样的东西：

<filter id="f1" x="0" y="0" width="200%" height="200%">
  <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

和一些javascript魔法将它应用于鼠标悬停。这可能会节省设计工作的时间。

问题是，svg显示为<a style='background-image:url(icon.svg)' />。

有没有办法进入SVG元素？

Answer 1

如果您使用jquery addclass并只是链接到另一个有更改的svg会怎么样？

您还可以使用html代码创建一个svg元素（右键单击文件 - ＆gt;使用记事本查看），然后您将获得代码 - 有在线转换器可以进行所有必要的调整，然后您可以输入使用javascript的svg代码

Answer 2

如果您使用SVG作为图像，那么您无法访问图像的DOM并通过javascript操作它。

虽然您可以使用XMLHTTPRequest加载它们，然后使用DOMParser对象将它们作为内联数据插入主文档，这会让您暴露出浏览器试图通过锁定图像访问来保护您的安全问题，即图像可能会改变，您可能会在页面中加载任意javascript。

对我来说最简单和最安全的是，如果您只是使用编辑器直接更改图像文件并将过滤器添加到其中，则使用修改后的图像。

Answer 3

我不知道如何以你的方式显示...作为背景图像...但是如果你可以像在this例子中那样在div中加载svg文件你可以使用我的导入程序（在github上创建的其他导入程序的修改版本），它位于http://www.dariomac.com/Document/Raphael-Utils。您还可以看到此storify，其中我描述了我直接从文件导入SVG所遵循的所有步骤。

Answer 4

不，这不是直接可能的。如果需要，解决方法是在html中使用内联svg，或者使用＆lt; object＆gt;，＆lt; iframe＆gt;引用svg文件。或者＆lt; embed＆gt;。

在悬停here上使用内联svg和过滤效果的示例。 svg部分基本上是这样的：

<svg width="400" height="400" viewBox="-2 -2 36 32">
  <defs>
    <style>
      #stack polygon:hover { filter: url(#glow); }
    </style>
    <filter id="glow">
        <feMorphology radius="0.7"/>
        <feGaussianBlur stdDeviation="1"/>
        <feColorMatrix type="matrix"
         values="0 0 0 0   0
                 0 0 0 0.9 0
                 0 0 0 0.9 0
                 0 0 0 1   0"/>
    </filter>
  </defs>
  <g id="stack" class="icon" fill="#850508">
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
  </g>
</svg>

是否可以使用Javascript动态修改作为资源加载的SVG？

4 个答案: