CODEWITHSUNDEEP
jquerywordpresssvg
user3057089
user3057089

Reputation:

Modify SVG from external source

I tried to add in many ways an SVG inlive in wordpress but it doesn't work probably because of the syntax when I copied the code inside ( HERE if you want to know of what I'm talking about)

So I need to insert it from an external source (SVG file) BUT I tried to modify it (only change fill color) with CSS (every path has his proper ID) and nothing works.

Is there a way to do that in jQuery? Is there a way to modify it in the DOM?

Upvotes: 0

Views: 1019

Answers (3)

Naehil
Naehil

Reputation: 21

If you are embedding your svg file via <object> tag you can use an external stylesheet inside the <svg> file

e.g in your html file you should use

<object data="svg-file.svg"></object>

and in your svg file use

<?xml-stylesheet type="text/css" href="yourstylesheet.css" ?>   
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

to link an external stylesheet to your svg file. If you also want to use a script for manipulating your svg file I recommend using ecmascript. It should look something like this:

<svg>
....
  <script type="text/ecmascript"><![CDATA[
  //some script code here
 ]]></script>
...
</svg>

Upvotes: 1

user3920796
user3920796

Reputation: 35

YOu could change the color by using method "attr" in jquery. and set the color attribute for SVG object.

Example in Jsfiddle

Here is the link about attr() in Jquery!

Here is the example code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function test(){
    $('#id rect').attr("fill", "yellow");
    }
</script>
<button onclick="test()"> test</button>
 <svg id="id" width="125" height="65"><rect x="3" y="3" rx="20" ry="20"  width="120" height="60" fill="red" ></svg>

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101956

You can't use CSS to alter the properties of an embedded SVG (ie via <img>, <object> etc). Styles don't apply across document boundaries.

However if you embed via an <object> you can use the DOM to add CSS to the SVG itself.

How to apply a style to an embedded SVG?

Upvotes: 0

Related Questions