CODEWITHSUNDEEP
objectsvg
Ben Frain
Ben Frain

Reputation: 2568

SVG: access defs item in HTML when SVG inside Object?

Suppose I have an SVG which has the following defs:

<svg width="179" height="170" viewBox="0 0 179 170" xmlns="http://www.w3.org/2000/svg">
    <title>Star 1</title>
    <defs>
        <g id="shape">
            <rect x="50" y="50" width="50" height="50" />
        </g>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <path stroke="#979797" fill="#D8D8D8" d="M89.5 140.25l-54.958 28.893 10.496-61.196L.576 64.607l61.445-8.93L89.5 0l27.48 55.678 61.444 8.93-44.462 43.34 10.496 61.195z" />
    </g>
</svg>

I am including that SVG inside an HTML document using the object tag. For example:

<object type="image/svg+xml" data="star.svg" class="svgObjectWrapper">
  Your browser doesn't support SVG
</object>

Is there any way, in the HTML document, to reference/use those defs from the SVG (which is in turn inside the object). For example, this doesn't seem to work. Should this be possible?

<use xlink:href="#shape" x="50" y="50" />

My guess is no, but I wanted to be sure.

Upvotes: 0

Views: 355

Answers (2)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

Since <object> loads the svg in a separate document you can't use local references (such as <use xlink:href="#shape"/>) in the top document to reach resources inside the other document. It is possible to reference external resources with <use> though, e.g <use xlink:href="star.svg#shape"/>. Note that this still does not mean that it's the same document as that in the <object>, e.g if you change elements inside the <object> element it will have no effect on <use xlink:href="star.svg#shape"/>.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124014

It's possible on UAs that support it (Firefox does for instance) and you don't even need an object tag if all you want is to reference a document via <use>.

Per the SVG specification you can just put in the URL of the file you want to use the data from i.e.

<use xlink:href="star.svg#shape" x="50" y="50" />

star.svg has to be on the same domain as your html file.

Upvotes: 1

Related Questions