Databases
StackOverflow2013
Postsdbo
POSVG USE element and :hover style
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSVG USE element and :hover style
    text
    copied!<p>I'm trying to use CSS <code>:hover</code> pseudoclass to style SVG elements embeded from <code>&lt;defs&gt;</code> by <code>&lt;use&gt;</code> tag, but it doesn't seem to work :-/ Here's my code:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/&gt; &lt;style type="text/css" media="screen"&gt; .active { fill: #0BE; } .active:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } .active2 #p2 { fill: #0BE; } .active2:hover #p2 { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } #p2:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;defs&gt; &lt;polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/&gt; &lt;g id="gr1"&gt; &lt;polygon id="p1" points="130,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6"/&gt; &lt;polygon id="p2" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/&gt; &lt;/g&gt; &lt;/defs&gt; &lt;g transform="translate(70,100)"&gt; &lt;use xlink:href="#p0" transform="translate(40,0)"/&gt; &lt;use xlink:href="#p0" transform="translate(250,0)"/&gt; &lt;use xlink:href="#p0" transform="translate(460,0)" class="active" /&gt; &lt;/g&gt; &lt;g transform="translate(100,300)"&gt; &lt;polygon id="style" points="110,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="foo"/&gt; &lt;use xlink:href="#gr1" transform="translate( 350,2)" class="active2"/&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I want it to work in a way that when user places the mouse pointer over the embedded element, its inner element with class "active" will change its style. It works when I embed one shape from the <code>&lt;defs&gt;</code> directly and apply the CSS class to the <code>&lt;use&gt;</code> which embeds it. But it doesn't work for any classes or ID's inside the group embedded through <code>&lt;use&gt;</code>.</p> <p>How to fix it?</p> <p>Or maybe there's a better way to do it?</p> <p>I need to change only this particular part inside the embedded object when the user hovers it, not the whole group. It's because different parts of this group would have different styles applied, and they need to change differently when hovered by the mouse.</p> <p><strong>Edit: What I want to get</strong></p> <p>What I want to get is a way to embed one "library object" from <code>&lt;defs&gt;</code> into many different places in my SVG document. Some parts of this object need to be styled with custom colors from the CSS, because I need easy customization of those colors without changing the library object's code.</p> <p>And then I need to signal the user when the mouse pointer is above such "active" object by styling its parts differently: some bright outlines here and there to show the shape of the clickable areas when the mouse pointer is over them.</p> <p>Unfortunately, I cannot apply the style to the <code>&lt;use&gt;</code> element's subelements, because they're not subelements of <code>&lt;use&gt;</code> in the DOM (as others already mentioned). I can apply some styles to the elements inside the <code>&lt;defs&gt;</code> section, because they're in the DOM and they're addressable with CSS selectors, but they <em>cannot</em> be hovered, because they're invisible, so applying <code>:hover</code> pseudoclass to them doesn't work. And it doesn't work either if this class is applied to the <code>&lt;use&gt;</code>, because then I cannot sub-select the proper sub elements (they're not sub-elements of <code>&lt;use&gt;</code>). So I don't have any hook to apply those <code>:hover</code> pseudoclass to.</p> <p>Maybe there's some other solution to my problem?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload