Question

好的，这是情景：

包装DIV＆gt;图标DIV＆gt; SVG 使用对象标签和文字

现在，我的要求是我们将鼠标悬停在包装器DIV 上，SVG的颜色（类：iconSVG）应该更改，这显然不起作用。我做的是这个：

.wrapperDiv:hover .iconDiv .iconSVG .st0 {
   fill:#ffffff;
}

（.st0是 Illustrator 创建的类，例如iconSVG内的特定形状

这不符合我的意图，但是当我用内联SVG替换对象时，上面的悬停工作非常完美。现在，我真的很想将SVG文件与主HTML分开。有没有办法做到这一点，还是我坚持使用内联SVG？我在很多文章中读过，当使用HTML中的对象标签调用SVG时，我们可以控制它们的CSS属性，所以我试了一下。

很抱歉，如果我错过了显而易见的事情 - 我对这个编程工作基本上是新手（我在这里采取了宝贝步骤）。

我应该学习Javascript来实现这个目标吗？（我听说 RaphaelJS 为SVG创造了令人印象深刻的东西提供了很好的机会）。虽然这可能是一个单独的线程，但我想知道花时间学习RaphaelJS对于UI / UX开发人员是否值得（我对JS有基本知识，但这还够吗？）

Answer 1

您无法更改加载为<img>的任何样式的SVG元素，但如果您将SVG加载为<object>，则执行的可能性有限}。

假设您加载了这样的SVG：

<html>
    <body>
        <object type="image/svg+xml" data="your-svg.svg" class="wrapper"></object>
    </body>
</html>

您的SVG包含以下代码：

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
    <g class="svg-icon" alignment-baseline="baseline">
        <circle r="50" cx="100" cy="100" stroke="blue" fill="green" opacity=".5"/>
        <rect class="st0" x="100" y="100" height="100" width="100" stroke="red" opacity=".5"/>
    </g>
</svg>

您可以使用CSS在其中添加<style>块：

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
    <style type="text/css">
        .svg-icon:hover .st0 {
           fill:#ffffff;
        }
    </style>
    <g class="svg-icon" alignment-baseline="baseline">...</g>
</svg>

当你悬停它时它会改变方形的填充颜色（并且不会改变圆的颜色）。这不适用于浏览器加载的CSS文件（使用HTML <link>），但是如果使用{{标准XML方式加载样式表，则应该可以正常工作3}}在你的<svg>...</svg>根元素之前：

<?xml-stylesheet type="text/css" href="svgstyle.css" ?>

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
    <g class="svg-icon" alignment-baseline="baseline">
        <circle r="50" cx="100" cy="100" stroke="blue" fill="green" opacity=".5"/>
        <rect class="st0" x="100" y="100" height="100" width="100" stroke="red" opacity=".5"/>
    </g>
</svg>

有了这个，您可以在SVG和HTML之间共享CSS文档，但是您应该知道上下文选择器的范围仅限于每个文件（例如，您不能拥有CSS混合HTML和SVG选择器的表达式，如div:hover .svg-icon {...}）

当将鼠标悬停在其父div上时，如何更改作为对象链接的SVG的属性？

1 个答案: