4

Is it possible to target SVG elements inside an OBJECT tag using CSS from the parent document?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        /* This should target the element with id `icon-so`
           inside the `img/so.svg` file */
        #icon-so{
            fill: red;
        }

    </style>
</head>
<body>

  <object type="image/svg+xml" data="img/icon-so.svg">so logo</object>

</body>
</html>
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • 3
    No, that’s not possible. The SVG has to be a part of the document itself, i.e. it has to be an `` element if you want to document’s stylesheet to affect the SVG as well, it won’t work if the SVG is “external” and only referenced via `object`, `embed` or even `img`. See also: http://www.w3.org/TR/SVG11/styling.html#Scope – CBroe May 27 '14 at 23:42
  • See http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg for some possible solutions to this. – Erik Dahlström May 28 '14 at 12:39

0 Answers0