I have a svg file and I use javascript to draw the image in a canvas using DrawImage function.
I'm wondering if I can use an external css file in my svg file.
I can't find anything about using an external css file without embeded or without using the svg file as image.
I found that, but it didn't work.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="453.96px" height="660.7px" viewBox="0 0 453.96 660.7" enable-background="new 0 0 453.96 660.7" xml:space="preserve">
<g id="Wind">
....
</g>
#Wind{
fill: blue;
width: 100px;
color:blue;
}
I am using something like this:
<svg . . . . >
<style type="text/css">
<![CDATA[
circle {
fill: red;
}
]]>
</style>
<circle . . . . />
</svg>
External css file using #import
<svg . . . .>
<style>
#charset "UTF-8";
#import url(estilosSVG.css);
rect{fill:#6ab150;}
</style>
<rect .../>
</svg>
If you don't want to use #import:
<?xml-stylesheet type="text/css" href="style.css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...................................
The DOCTYPE part is optional.
I'm having trouble changing the colour of an svg image with jquery or vanila javascript. I've tried a couple of things but nothing seems to work, the original colour is black and i can change it if i open the svg image in my IDE and add/change the fill attribute. But not with JS. What am I doing wrong? Other lines of code work fine so it is not a problem with the files or so.
So far i've tried these lines of codes and put id on the img tag aswell as the svg element it self
html:
<img src="import/splash.svg">
JS:
$('#myId').css({fill:"#f8b9d4"});
$("myId").attr("fill", "yellow");
document.getElementById("myId").setAttribute("fill", "#f8b9d4");
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 588 497" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
id="myId" fill=""></path>
</g>
UPDATE - created a completley new project but the problem is the same. (The div is for testing and working fine)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="tmo.js"></script>
</head>
<body>
<img src="splash.svg" alt="">
<div id="h"></div>
</body>
</html>
jquery:
$(document).ready(function () {
$('#myId').css({fill:"blue"});
$("#h").text("heasdadasdsadasdsad");
});
SVG file:
<svg width="100%" viewBox="0 0 588 497" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 "
id="myId"></path>
</g>
</svg>
I'd say it's because you're using an <img> tag rather than putting the <svg> directly in the HTML.
If you cannot put the <svg> directly in your HTML, embed it using the <object> tag, e.g. like this:
<object id="img" data="test.svg" type="image/svg+xml">Your browsser doesn't support SVG</object>
Then, you can access elements inside the <object> like this:
document.getElementById("img").contentDocument.getElementById("myId").setAttribute("fill", "#f8b9d4");
Your Jquery css works fine. You don't need to have an empty fill="" attribute on the path.
Note: Scroll down on the code snippet to see result, your viewbox is a bit big :)
$('#myId').css({fill:"blue"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="100%" viewBox="0 0 588 497" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
id="myId"></path>
</g>
</svg>
Try This-
$('#myId').css({fill:"blue"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="100%" viewBox="0 0 588 497" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>random title</title>
<g>
<path
d="M259.952694,496.613554 C253.376792,496.613554 250.627732,488.109987 250.038987,483.084288 L246.271494,450.855246 C245.492831,444.196255 243.408484,440.818093 240.070679,440.818093 C236.607054,440.818093 232.400376,443.96598 231.070952,445.174331 L199.957676,473.559913 C195.010319,478.077582 191.435117,480.178547 188.70505,480.178547 C187.190455,480.178547 185.884771,479.528079 185.020645,478.350589 C182.383162,474.756395 184.650306,466.661151 185.407603,464.263439 L192.935467,440.450127 C193.543204,438.531958 194.03699,435.934833 192.949711,434.446352 C191.893294,433.002977 189.478964,432.791694 188.135296,432.791694 C187.140602,432.791694 186.411793,432.903271 186.3382,432.91514 L127.318884,443.085236 C118.696618,444.573716 112.519544,442.940424 109.001317,438.313553 C103.842676,431.523993 106.712808,420.883851 106.838629,420.439918 "
id="myId"></path>
</g>
</svg>
I would like to dynamically replace a text element of an svg object from a local text file. Below my files text et svg:
text file:
<p id="p1">It works fine</p>
text svg:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect id="svg_1" height="87" width="162" y="188" x="130" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/>
<text xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="divA" y="240" x="313" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text>
</svg>
It works fine with the div or if I put the value, for example dog, for the element svg to modify. below mon fichier html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("#divA").load("demo_test.txt #p1");
var y = $("#div1").load("demo_test.txt #p1");
document.getElementById("div1").textContent = y;
var svg = document.getElementById("textsvg");
var svgDoc = svg.contentDocument;
svgDoc.getElementById("divA").textContent = "dog";
});
</script>
</head>
<body>
<div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div>
<object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>
</body>
However, when I put the variable y for the text element svg I have the message "[object Object]" instead of the message "It works fine". Below the html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("#divA").load("demo_test.txt #p1");
var y = $("#div1").load("demo_test.txt #p1");
document.getElementById("div1").textContent = y;
var svg = document.getElementById("textsvg");
var svgDoc = svg.contentDocument;
svgDoc.getElementById("divA").textContent = x;
});
</script>
</head>
<body>
<div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div>
<object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>
</body>
Can you help me.
Thanks,
B.R,
<script>
$(document).ready(function(){
$("#divA").html("Gorillaz Inc");
});
</script>
This works with jquery
Full example: http://codepen.io/anon/pen/pRRgaP
Note: I didn't use files, I just updated the svg dynamically
I solved part of my problem. I have directly embedded the "svg" into my html.
I noticed that by downloading the text file without the tags: demo_text1.txt the div appears well and the text svg:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").load("demo_test.txt #p2");
$("#divA").load("demo_test1.txt");
});
</script>
</head>
<body>
<div id="div1"><h2 style="color:blue">PSU0 to PDU-A G0-2</h2></div>
<svg width="800" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect id="svg_1" height="87" width="162" y="20" x="5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/>
<text xml:space="preserve" text-anchor="start" font-family="serif" font-size="14" id="divA" y="67" x="175" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text>
</svg>
</body>
</html>
fichier text:demo_test.txt
<p id="p1" >It works fine</p>
<p id="p2" style="color:blue">I use the local text file "demo_test.txt".The "div" works fine with tags</p>
fichier text:demo_text1.txt
I use the local text file "demo_test1.txt".
The text of svg works fine without tag but doesn't work with tags
Screen display ok:
enter image description here
However, by pointing the text svg to the text file with the tags (demo_test.txt, it does not work:
Screen not ok:
enter image description here
I have 3 SVGs shown below. I can only change the color of the inline SVG. Any ideas why? (Code hosted on IIS)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<object id="objectSvg" type="image/svg+xml" data="eq.svg"></object>
<svg id="svg" width="100" height="100" viewBox="0 0 300 300">
<use xlink:href="eq.svg#EarthquakeSymbol"></use>
</svg>
<svg id="inline" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="300px" height="300px">
<circle cx="150" cy="150" r="140" stroke="black" stroke-width="20" fill="none"/>
<path id="mypath"stroke="#000000" stroke-width="20" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="3" fill="none" d="M 35.5 141.55 L 81.05 141.55 108.75 86.1 150.35 223.05 189.4 132.8 207.95 172.5 222.7 141.65 265.8 141.65"/>
</svg>
<script>
$('#objectSvg path').css({ stroke: "#ff0000" });
$('#svg path').css({ stroke: "#ff0000" });
$('#inlineSvg path').css({ stroke: "#ff0000" });</script>
</body>
</html>
I am pretty sure you can't style externally loaded SVGs with css. Why not cut and paste the code from the external SVG into your html like the other two you have?
This is a great resource for information about using SVGs: https://css-tricks.com/using-svg/
I've created a little page just as this one here:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
executeAnimation();
}
</script>
</head>
<body>
<h1>Tester</h1>
<embed src="test.svg" type="image/svg+xml" />
<hr />
<input type='button' value='Test' onclick='test()' />
</body>
</html>
The test.svg looks like this:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="900">
<title>Title</title>
<desc>Desc</desc>
<defs>
<script type="text/javascript">
<![CDATA[
function executeAnimation () {
document.getElementById('anim').beginElement();
}
]]>
</script>
</defs>
<ellipse cx="500" cy="1090" rx="600" ry="0" fill="rgb(94,114,54)">
<animate id="anim" attributeType="XML" attributeName="ry" begin="indefinite" dur="2s" from="0" to="350" fill="freeze" />
</ellipse>
</svg>
As you can see, I want to call from JavaScript in the HTML page the function executeAnimation() which is defined insite the SVG image. This actually does not work.
I also tried this:
<svg onload='onloadFunction()'...>
...
function onloadFunction() {
alert('i am loading');
window.executeAnimation = executeAnimation();
}
This was suggested in another forum, but this did also not work (window.executeAnimation was undefined from outside).
What would be the real correct way to do this?
Without seeing the source of your .svg, it's impossible to answer specifically...
Check this out: https://codepen.io/lambdacreatives/pen/uygzk
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="77px" height="77px" viewBox="0 0 77 77" enable-background="new 0 0 77 77" xml:space="preserve">
<g>
<path id="d" fill="#ffffff" d="M49.045,61.112c2.549-1.198,4.867-2.798,6.857-4.743L36.83,13.587c-2.862,0.186-5.602,0.826-8.124,1.899
l6.448,14.465l-15.12,25.387c1.866,2.038,4.044,3.785,6.489,5.118L39.236,39.11L49.045,61.112z"/>
<path id="circle" fill="#ffffff" d="M38.457,67.2c-15.852,0-28.701-12.848-28.701-28.701c0-15.851,12.85-28.697,28.701-28.697
c5.773,0,11.137,1.72,15.639,4.653l4.605-7.702c-6.049-3.873-13.114-5.998-20.359-5.998C17.531,0.754,0.6,17.687,0.6,38.499
c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.865l-3.809-8.533C52.514,64.405,45.818,67.2,38.457,67.2z">
<animateTransform
xlink:href="#circle"
attributeName="transform"
attributeType="XML"
id="ani-circle"
type="rotate"
from="0 38.501500725746155 38.4994986653327945"
to="360 38.501500725746155 38.4994986653327945"
dur="0.3s"
begin="click"
repeatCount="1"
fill="freeze" />
</path>
</g>
</svg>
<br><br>
<button id="trigger">Trigger Animation</button>
CSS
body {
background-color: black;
text-align: center;
}
svg {
height: 100%;
width: 200px;
path {
fill: white;
}
}
JS
$( "#trigger" ).click(function() {
document.getElementById("ani-circle").beginElement();
});
If you can't work it out from that, post the source of your .svg and I'll knock up a specific answer for you.