SVG manipulation

Ionic Framework ionic-v3
1

Heeey!
This is my first post on this forum :smiley:

I’m here because I’m stuck for many days and I don’t find any solutions.
My request is simple: manipulate SVG which are included with object balise and dynamically.

Like this:

<a *ngFor="let filter of filters;let x = index" [ngClass]="filter['filterName']" (click)="filterAction(filter['filterName'], x)">
      <object type="image/svg+xml" class="active" [data]="filter['filterName']+'.svg'"></object>
      <p>{{ filter.title }}</p>
</a>

I want to manipulate this SVG with CSS class, and make animation on it…but my CSS class don’t work.

Thaaaank you so muuuch :wink:

2

Hey @Hexago, the point is that svg attribute and html tags comon attributes are slightly different sometimes. So you need to use correct attribute on svg object.
Could you post your css class here? that will help to understand to problem .

3

Hey @quieterkali!
Thanks for you reply.

SVG example I use:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="131.5px" height="122.5px" viewBox="0 0 131.5 122.5" enable-background="new 0 0 131.5 122.5" xml:space="preserve">
<filter  id="AI_FlouGaussien_4">
	<feGaussianBlur  stdDeviation="4"></feGaussianBlur>
</filter>
<g id="Calque_4">
</g>
<g id="Calque_3">
	<g filter="url(#AI_FlouGaussien_4)">
		<circle fill="#939598" cx="65.701" cy="61.565" r="45.065"/>
	</g>
	<circle fill="#FFFFFF" cx="65.643" cy="61.753" r="47.224"/>
	<g transform="translate(0,-952.36218)">
		<path fill="#4FC5DA" stroke="#4FC5DA" stroke-width="2" stroke-miterlimit="10" d="M53.43,990.86
			c-3.436,0-6.856,1.318-9.479,3.988c-5.245,5.341-5.239,13.962,0,19.305l22.053,22.511c0.271,0.269,0.709,0.269,0.979,0
			c7.36-7.495,14.716-14.994,22.075-22.49c5.245-5.338,5.245-13.941,0-19.283c-5.246-5.34-13.736-5.34-18.981,0l-3.552,3.618
			l-3.595-3.662C60.308,992.178,56.865,990.86,53.43,990.86z M53.43,992.233c3.066,0,6.137,1.191,8.5,3.595l4.096,4.162
			c0.271,0.27,0.708,0.27,0.98,0l4.074-4.139c4.721-4.808,12.278-4.808,16.998,0c4.719,4.806,4.719,12.538,0,17.343
			c-7.194,7.323-14.38,14.661-21.571,21.986l-21.574-22.008c-4.718-4.811-4.722-12.537,0-17.344
			C47.291,993.425,50.362,992.233,53.43,992.233z"/>
	</g>
</g>
<g id="Calque_7">
</g>
<g id="Calque_6">
	<g id="Calque_5">
	</g>
</g>
<g id="Calque_2">
</g>
</svg>

…and the CSS apply to it:

page-poi {
  object .here {
    stroke: #FFF;
  }
}

And It does not work :frowning:

4

Thanks for giving more detail. I’ve been playing around the code you sent to me making some test and i do aplly classes and they do works. Maybe you are doing it the wrong way. did you try to change “object” by the name of the right tag you are targetting? And one more details, if you do “object .here”, the class “here” should not be on object but on an inner element.
i tried this svg .here { fill: #000; }

so i call “here” in circle tag and that work.
give it a try.

5

I tested your solution…but always the same problem. It’s like the CSS does not affect the DOM :confused:

I think an important point is that my SVG is not inline the code…If I include it in the DOM directly It works.
But I have like 30 SVG and I can’t include inline, not a good way.

6

I think i find out the way you can perfom what you want. Basically you have to put at the top of your svg file the link of your stylesheet or use @import to import the stylesheet that will manipulate de svg. See this link for better explanations: https://www.w3.org/TR/SVG2/styling.html
hope this will help. Please let me know if that doesn help we’ll dig a bit more to find the solution :slight_smile:

1 Like
7

Thanks for this link

I added this just after <svg>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="/src/pages/poi/poi.scss" type="text/x-scss"/>

But always the same problem.
A lot of Ionic app use SVG with animations, but how does it work ? x)
Maybe create my own Ionic icon ?

8

It’s style doesn’t working cause i think youŕe putting the wrong path. As you should already know when your app run, it do it from “www” directory and even your own svg file are copy to there too. So if you want to put the right path you should find out where your svg file is in the “www” directory and from there discover de path to “build/main.css” cause this is where all your css will stand when running your app. Try to do that.
About how to do animation with svg i personally never do that so i can’t help you a lot. but about creating your own svg icon, yeah you can do your own.

9

ooooh! Thanks, but It still not working…

Maybe, it’s cleaner to use Angular Animation attributes.
I found this : https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

1 Like
10

Thanks for sharing this link, i am going to learn from it :slight_smile:

1 Like
11

Finally this tutorial doesn’t help me…

I’m lost :persevere:

…but I found something this afternoon :
https://www.npmjs.com/package/ionic2-custom-icons

This is a npm script for creating customs SVG icons :smiley:
I’m testing it right now, I’ll come back here for some feedbacks.

12

If you have a lot of svgs - why not make them all nested inside one which you can call root and avoid using object?

And definitely in your example you attempt to style the object and not the svg inside of it

13

Hey @cmer4,
Even if I use one file for my SVGs, I have the same problem: I couldn’t manipulate them and change the fill, stoke etc…

When I include a SVG with a object tag, It’s like the SVG was an iframe and my CSS doesn’t affect it :confused:

14

I found the solution!
This script saved my life: https://www.npmjs.com/package/angular-svg-icon