.i image,
.i path,
.i {
fill: red;
stroke: red;
margin-top: 5px;
}
<svg class="i">
<image class="i" xlink:href="https://nextgenthemes.com/wp-content/bubble.svg" height="100%" width="100%"/>
</svg>
It does work if I use the <use> element and reference a symbol from a svg definitions file.
jsbin
The SVG <image> element does not accept fill as an attribute. So it would not accept the CSS fill equivalent.
W3C SVG <image> element: http://www.w3.org/TR/SVG11/struct.html#ImageElement
Attribute definitions for the SVG <image> element :
x = The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
y = The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
width = The width of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
height = The height of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
xlink:href = A IRI reference.
Animatable: yes.
If it works with the SVG <use> element than use it!
What you want is not possible, for two different reasons.
SVGs loaded via HTML <img> or background-image, or via an SVG <image> can be considered as being rendered to a static form whose contents are not styleable by the parent. Think of it as having been converted to a bitmap.
CSS rules do not apply across document boundaries. You cannot have rules in one document (the HTML) that style elements in another document (in this case the SVG bubble.svg).
Related
This works:
<img src="img/home/icon.svg" alt="one" class="trysvg">
This doesn't work:
<svg>
<use xlink:href="img/home/icon.svg" class="trysvg"></use>
</svg>
CSS:
.trysvg {
//position: relative;
//display: block;
//color:black;
height: 20rem;
width: 20rem;
}
When checking dev tools and trying it with use svg it shows shadow-root (closed). Tried to search, but couldn't come up with any solution. SVG icon is from reliable source - downloaded, so there shouldn't be a problem with svg code. Any ideas?
edit: I also tried to put class on the < svg class... >, was still not working and also put class on < svg class... > + < use class.. > and still nothing.
edit2: when I use href instead of xlink href the problem remains..
SVG 1.1 does not permit <use> elements to point to an entire file. SVG 2 does permit this but no browser has got round to implementing that part of the SVG 2 specification yet.
If you want to use a <use> element and have it work with today's browsers, you'd need to put an id on the <svg> root element and have a fragment identifier that references that id.
The SVG 1.1 standard says that the font-size attribute is allowed in text content elements. The <g> element is not a text content element. Conclusively, the <g font-size="45"/> is illegal.
However, many examples in the standard show <g>-elements with the font-size attribute.
Is the attribute allowed in <g> elements or are the examples showing invalid code?
font-size is an inherited CSS property so if you set it on a parent element, it applies to all that element's children.
It can have an indirect effect on non-text elements if they use em or ex units i.e. they are sized relative to the font-size. What the specification is trying (pretty poorly) to say is that setting a font-size on a rect element won't have any effect.
The specification for a g element is explicit that font-size is a property it supports. Click on the presentation-attributes link in the g element section on that page and the text will expand to show font-size as a supported attribute.
I would like to convert a transform SVG attribute into a CSS transform. Here it is:
<g transform="translate(11.225 164)"/>
But CSS requires me to specify units. What is the correct unit to specify? Since it's supposed to be a library, I don't know the width, height or viewport of the <svg>. Thus I can't compute the px or so.
The default (user) unit is px.
One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5".
Per the SVG specification
Are there situations where an SVG <text> element's dominant-baseline style will be ignored?
I have two <text> labels in two different parts of my SVG. The dominant-baseline: central applied to one works without issue (for example, when I open it up in Chrome's web inspector and change the value, the element moves around as I would expect it to), but it does not seem to affect the other (ex, changing the style's value from the web inspector doesn't change the position of the element).
Is there any reason this could be?
Here is a screenshot of the relevant code:
(I'll post a fiddle demonstrating the problem if I can figure out how to reproduce it)
The culprit was an errant display: inline that the .label was inheriting from its HTML counterpart.
The fix:
svg.label {
display: block;
}
I have a set of dynamically created svg objects. Some of them have rather complicated transformations applied to. I mean this is meaningless that I want to calculate maximum and minimums of X & Y of these objects. I want viewbox (or any similar tag that may be useful) to show all these objects without engaging me in calculating extents of drawing objects.
Could you please help?
Thanks
You can use getBBox() on the path element to get the extents of your drawing.
var clientrect = path.getBBox();
var viewBox = clientrect.x+' '+clientrect.y+' '+clientrect.width+' '+clientrect.height;
You can then set the viewbox to these co-ordinates.
n.b. i think you can change the viewbox of an svg after it's rendered so you may have to re-render the svg.