<div>
Also, is there a way right in the SVG file to do a hover event, using CSS/classes?
</div>


Also, is there a way right in the SVG file to do a hover event, using CSS/classes?

<div>
Hi HLRosenberg,<br />
<br />
Please checkout <a href="http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs" rel="ugc">Peter Collin's site</a> about this, it explains a lot:
</div>


Hi HLRosenberg,

Please checkout Peter Collin's site [http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs] about this, it explains a lot:

<div>
<pre><code id="code-20-41587274-1">sectionLayer.on('mouseover', function () {
this.style.opacity = '0';
this.setAttribute(&quot;stroke-width&quot;, '13');
this.setAttribute(&quot;stroke&quot;, &quot;blue&quot;);
this.setAttribute(&quot;fill&quot;, &quot;green&quot;);
}); </code></pre>
</div>


sectionLayer.on('mouseover', function () {
this.style.opacity = '0';
this.setAttribute("stroke-width", '13');
this.setAttribute("stroke", "blue");
this.setAttribute("fill", "green");
}); 

<div>
<div class="content wysiwyg-content">
I have SVG file. &nbsp;Using D3 to load. &nbsp;I want to change the fill color and/or the stroke width or color of a path on mouseover and mouseout. &nbsp;I have the mouse event working, but I cant get the attributes/colors, etc, to change. &nbsp;I can get the opacity to change. See code below .<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;sectionLayer.on('mouseover<wbr />', function () {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d3.select(this).style(&quot;opa<wbr />city&quot;, 0);<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d3.select(this).style(&quot;str<wbr />oke-width&quot;<wbr />, 13);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d3.select(this).style(&quot;str<wbr />oke&quot;, &quot;blue&quot;);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d3.select(this).style(&quot;fil<wbr />l&quot;, &quot;green&quot;);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
</div>
</div>


I have SVG file.  Using D3 to load.  I want to change the fill color and/or the stroke width or color of a path on mouseover and mouseout.  I have the mouse event working, but I cant get the attributes/colors, etc, to change.  I can get the opacity to change. See code below .

                   sectionLayer.on('mouseover', function () {
                            d3.select(this).style("opacity", 0);

                            d3.select(this).style("stroke-width", 13);
                            d3.select(this).style("stroke", "blue");
                            d3.select(this).style("fill", "green");
                        });

D3, mouseover, SVG, Javacript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

Extensible Markup Language (XML) refers to the encoding of documents such that they can be read by both machines and humans. XML documents use tags to show the beginning and end of a set of data. XML is used extensively on websites to show volumes of data, and is the default for a number of office productivity suites. This topic includes discussions of XML-related technologies, such as XQuery (the XML Query language), XPath (the XML Path language), XSLT (eXtensible Stylesheet Language Transformations), XLink (the XML Linking language) and XPointer (the XML Pointer language).

Websites use graphics to enhance information, assist navigation, and generally improve the user’s experience. To create those graphics, developers use any number of programs, like the Adobe Creative Suite (Photoshop and Flash have their own topics), the CorelDraw suite, Xara, Gimp, ACDSee, Serif, ULead and others.