CODEWITHSUNDEEP
javascripthtmlsvg
Luves2spooge
Luves2spooge

Reputation: 78

How to insert an object from SVG file using javascript/html?

I have an SVG file with a bunch of different objects on one layer. Is there anyway to display a specific object from the file on a webpage without first splitting the objects out into their own file?

Upvotes: 1

Views: 317

Answers (2)

C3roe
C3roe

Reputation: 96250

That’s a perfect use case for the use element ...

https://developer.mozilla.org/en/docs/Web/SVG/Element/use:

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is

https://css-tricks.com/svg-use-with-external-reference-take-2/ explains how to make use of it for an SVG icon system, where all the icons are combined into one single SVG. Might be adaptable for your use, or at least give some more insight on how this works.

Upvotes: 1

Tom M
Tom M

Reputation: 2904

Sure. Give an ID or a class to the object in the SVG code. Then you can hide the objects via 

.mySvgObjectClass { 
    visibility: hidden
}

or in Javascript

document.querySelector('.mySvgObjectClass').style.visibility = 'hidden';

or in jQuery:

$('.mySvgObjectClass').css('visibility', 'hidden');

Upvotes: 1

Related Questions