Databases
StackOverflow2013
Postsdbo
PODynamically change the CSS file of an external SVG file?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically change the CSS file of an external SVG file?
    text
    copied!<p><strong>How to tell to the SVG image to use another CSS file ?</strong></p> <ul> <li>A web page displays a SVG file.</li> <li>A button allows to switch between classic colors to high contrast on the whole web page including the SVG image.</li> </ul> <h2>Attempt</h2> <p><strong><code>w.css</code></strong> (white background)</p> <pre class="lang-css prettyprint-override"><code>svg { background-color:white; } path{ fill:none; stroke:black; stroke-width:8px; } </code></pre> <p><strong><code>b.css</code></strong> (black background)</p> <pre class="lang-css prettyprint-override"><code>svg { background-color:black; } path{ fill:none; stroke:white; stroke-width:10px; } </code></pre> <p><strong><code>image.svg</code></strong></p> <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0"?&gt; &lt;?xml-stylesheet type="text/css" href="w.css" title="classic" ?&gt; &lt;?xml-stylesheet type="text/css" href="b.css" title="contrast" alternate="yes" ?&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"&gt; &lt;path d="M150,100 H50 V300 H150 M250,300 H300" /&gt; &lt;/svg&gt; </code></pre> <p><strong><code>example.html</code></strong></p> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;body&gt; &lt;embed id="svg_image" src="image.svg" type="image/svg+xml" /&gt; &lt;script type="text/javascript"&gt; var embed = document.getElementById("svg_image"); function change_css(file){ var svgdoc = embed.getSVGDocument(); var b = svgdoc.childNodes; for (var i=0; i&lt;b.length; i++){ var itm = b.item(i); itm.Data = "href='"+ file +"' type='text/css'" ; } } &lt;/script&gt; &lt;input name="c" type="radio" onclick="change_css('b.css');"&gt;High contrast&lt;br&gt; &lt;input name="c" type="radio" onclick="change_css('w.css');" checked="yes"&gt;Classic &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>WEB SEARCH:</strong> No answer found in 2011<br> <a href="http://tech.groups.yahoo.com/group/svg-developers/message/56679" rel="nofollow noreferrer">http://tech.groups.yahoo.com/group/svg-developers/message/56679</a></p> <p><strong>UPDATE:</strong> See also <a href="https://stackoverflow.com/questions/3569789/question-about-correctly-structuring-javascript-css-and-svg">question about correctly structuring javascript, css, and svg</a><br> Maybe jQuery SVG (keith-wood.name)...</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