將鼠標懸停在其父div上時，如何更改鏈接為對象的SVG的屬性？

Question

好的，這是場景：

包裝DIV>圖標DIV>使用對象標簽和文本的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方式加載樣式表，並在<svg>...</svg>之前使用xml-stylesheet處理指令，則該樣式應該可以使用<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 個解決方案

解決方案1
2 2014-06-16 19:22:45

將鼠標懸停在其父div上時，如何更改鏈接為對象的SVG的屬性？

問題描述

1 個解決方案

解決方案1 2 2014-06-16 19:22:45

解決方案1
2 2014-06-16 19:22:45