How do you style a external svg with css

by

If you include your svg image by referencing an external file, like you do with the object tag, the elements in the svg image are not included to your main documents DOM tree. They comprise their own tree. Therefore, the elements in the external image can’t be matched by CSS selectors in the main document.

You can style the object element like you could most other elements, for example giving it a border. But you can’t (this way, at least) access the elements in the external image. In your case, you try to style #ob‘s color. That would apply to the objects text color, not to any color inside the referenced svg image. On browsers not supporting svg, the “Your browser does not support SVG” notice would probably rendered in blue.

The case with your CSS selector for svg is similar: CSS selectors in the main document match only to elements in the main document, and there’s no svg to be found, just an object.

There are some ways to apply CSS styling to svg elements. The idea generally is to bring the CSS and the svg elements to the same DOM tree, either by getting the svg elements from the external file to the main document or the CSS from the main document to the external file:

  1. Embed your svg element and its child elements directly into the main document instead of referencing an external file. In this case, the svg element and its children will be part of the man document’s DOM tree, so they’re accessible to the main document’s CSS.
  2. Embed an svg element into your main document and use xlink’s use to reference an external svg image (rather, a part of it). For the general idea, see this answer or this answer.
  3. Load the elements from the external image to the main documents tree via AJAX/XHR. For the general idea, again see this answer.
  4. You can grab a hold of the external images’ tree with JavaScript and edit their styles from there. The keyword for that would be contentDocument, see this answer.
  5. If you can’t get the elements from your external svg image to your main document’s DOM tree, so the main documents CSS selectors can match to it, you can try the other way around: Add your CSS to your svg file. Similar to the ways you can include CSS into a html document, you can use inline style attributes, use a style element like in html’s head or reference an external CSS file with <?xml-stylesheet ... ?>. For more information, see for example this tutorial.

More Related Contents:

  1. img src SVG changing the styles with CSS
  2. Transparent text cut out of background
  3. SVG data image not working as a background-image in a pseudo element
  4. Inline SVG in CSS
  5. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  6. SVG animation is not working on IE11
  7. CSS transparent curved shape with two rounded sides
  8. Is there a way to use SVG as content in a pseudo element ::before or ::after
  9. SVG USE element and :hover style
  10. How to animate handwriting text on the web page using SVG?
  11. How to create a curve on the top of a background?
  12. Specify an SVG as a background image and ALSO style the SVG in CSS?
  13. Outlining and partially filling an SVG Shape
  14. Can I change the fill color of an svg path with CSS?
  15. How to make a element expand or contract to its parent container?
  16. SVG in img element proportions not respected in ie9
  17. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. Background-size with SVG squished in IE9-10
  20. How to Include CSS style when converting svg to png
  21. How can I change the color of an ‘svg’ element?
  22. How to add animated gradient to an svg path?
  23. Transparent hollow or cut out shape in HTML
  24. 3d transforms on SVG element
  25. CSS change d property of
  26. Fill only Half a star with SVG
  27. Tint image using CSS without overlay
  28. Why don’t CSS filters work on SVG elements in Chrome?
  29. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  30. Double curved shape

Leave a Comment