I am trying to style elements of SVG using CSS. I used iframe in my index.js file to reference my SVG, and the SVG displays fine. However, my CSS styling didn't apply as it would have had I just copy/pasted the SVG contents into my index.js. The contents are stored under an object #document. How do you reference iframe contents using CSS?
Are you using an <iframe> or an <object>? Your title says the former, but your questions suggests the latter.
Assuming you really mean an <iframe>. Then the answer is: you can't. CSS does not work over document boundaries. So you can't style the contents of an iframe from the page that contains the iframe. The content of the iframe is a separate file (the SVG file).
If you want to style the SVG, then you will need to put the CSS in the SVG (using a <style> element), or reference the CSS file using the XML way of including style sheets:
<?xml-stylesheet href="common.css"?>
See: https://www.w3.org/TR/xml-stylesheet/
Assuming your svg is on the same domain, you could append a stylesheet after loading via js:
let svgIframe = document.querySelector('.svgIframe');
if(svgIframe){
svgIframe.addEventListener("load",function(e){
let svgDoc = svgIframe.contentDocument;
let iframeSvg = svgDoc.querySelector('svg');
let css = document.createElementNS("http://www.w3.org/2000/svg", "style");
css.textContent = 'path{fill:red;}';
iframeSvg.appendChild(css);
});
}
Related
I have a problem I don't know how to manipulate svg for example how to transform it, if file is in other directory, not in the HTML file.
I attach img how I linked it and my directories
You can't. An SVG linked to with <img> is effectively loaded and presented on the page as if it was a bitmap (like a PNG etc). It must be inline if you want to manipulate it.
I have an html file containing just the menu and include it on my html page using embed tag:
<embed type="text/html" src="menu.html">
How can I apply css class to the code being included? I tried adding it to the menu.html file but that did not work
The embed tag isolates the source file, so CSS in the parent page will not cascade into the embed element.
You will have to load the CSS file inside the menu.html file for it to apply to the content in that file.
Try Inline CSS classes in menu.html file.
Figured out the issue - I needed to set the width of embed tag to see the whole thing as by default the width did not allow me to see the entire file
I have an iframe, and I want to set the style inside attribute srcdoc using only CSS.
<iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe>
Is it possible to set the style of span inside srcdoc without using inline style but only style sheet?
If not, I can only put the whole html coding inside srcdoc to change the style?
CSS styles of an iframe are independent from main page appearance. And it is not possible to manipulate externally its design.
Relating to srcdoc attribute, I do not understand what you want. About it, MDN says: "This attribute is expected to generally be used together with the sandbox attribute".
You could try to do it with Javascript by changing the attribute. I am not sure if that is a possible solution for you. But if it is, create a function that can dynamically change the attribute to whatever you want. That way you don't have add it statically inline.
I will give you an quick example below.
document.getElementsByTagName("iframe")[0].setAttribute("srcdoc", "demoValue");
And to change the style of the inner span all you have to do is assign it an id. And make a rule in your CSS, this will alow you to manipulate it both in Js and CSS.
If the iframe is not in the same domain you will not be able to modify the content client side. You will have to read the page using PHP and echo it from your domain.
Is it possible to style an external .svg with css like you would with text? What am I missing?
My mark up and css looks like this:
<style type="text/css">
#ob {
color: blue;
}
svg {
fill: currentColor;
}
<object id="ob" type="image/svg+xml" data="czo_svg_icons/czo_extra_closed.svg">Your browser does not support SVG</object>
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:
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.
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.
Load the elements from the external image to the main documents tree via AJAX/XHR. For the general idea, again see this answer.
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.
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.
This question already has an answer here:
CSS Transitions and transforms on SVG elements
(1 answer)
Closed 8 years ago.
I've created an illustration in Adobe Illustration, which I want to use on a webpage. I also would like to add some CSS transitions to a few items in the illustration. Those items consist each of multiple Illustrator layers.
To add CSS to such thing, I would think of a SVG format file. The problem is: How do I add CSS (transition) to a certain item from a SVG file, instead of the whole file itself?
When I check the uncompressed SVG code, I do see thinks such as <g id="Guitar"> and other items with ID's.
Based upon that, I would think of #guitar:hover { transform:rotate(4deg);transition: all 0.4s ease;}
But I'm unsure about that.
I hope for some feedback. Thanks!
Yes, you can do this. There are three things you need to take into account though:
If you want to target SVG elements with your css, the stylesheet must be inside that SVG, like here
If the svg is loaded using an IMG tag, you can always target the IMG itself. If that SVG contains css files though, they will not apply since an image has to be loaded in a single request, so loading a SVG file that it iself loads a CSS file using an IMG tag, the styling will not work
If you load the SVG as a background image, the browser handles it as an image file, not as an SVG document. So things like :hover, :focus and :active will not work
You can style the SVG elements using the same CSS selectors you would normally use for HTML