0

我有这些图标，我想在悬停时在程序上为它们添加一个阴影（基本上是一些东西，任何东西），这样它们看起来就不会那么做作了。

它们是 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 元素？

4

4 回答 4

1

不，这不是直接可能的。如果需要，一种解决方法是在 html 中使用内联 svg，或者使用 <object>、<iframe> 或 <embed> 引用 svg 文件。

在此处使用内联 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>
于 2012-09-24T08:06:25.843 回答
0

如果您使用 jquery addclass 并简单地链接到具有您更改的另一个 svg 怎么办？

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

于 2012-09-17T20:32:54.340 回答
0

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

于 2012-09-18T00:27:19.297 回答
0

如果您将 SVG 用作图像，那么您将无法访问图像的 DOM 并通过 javascript 对其进行操作。

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

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

于 2012-09-17T21:32:00.790 回答