Menu
Never thought I will ask something about CSS but here it is. When you develop a widget you can't rely on particular website's stylesheet so you want something like this:
.xxx-widget * {
all:revert;
}
But in case your widget has SVG icons:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19 16"><path fill-rule="evenodd" d="M.009 16l18.658-8L.009 0 0 6.222 13.333 8 0 9.778z"></path></svg>
reverting all removes also and d property from svg and icon disappears. Then I tried to modify reverting selector:
.xxx-widget *:not(svg) {
all:revert;
}
Above snippet does not work and at the same time browser does not recognize it as incorrect and a lot of styles are getting broke. Is there any approach to compose selector for everything except svg?
636
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .
The SVG <style> element allows style sheets to be embedded directly within SVG content. Note: SVG's style element has the same attributes as the corresponding element in HTML (see HTML's <style> element).
Changing Attribute Values Once you have obtained a reference to the SVG element you can change its attributes using the setAttribute() function. Here is an example: var svgElement = document. getElementById("rect1"); svgElement.
<g> The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the <use> element.
Interesting question. First off, CSS affecting SVG d attributes (currently) happens in Chromium based browsers. Firefox is yet to follow. (But for most of rest SVG properties it holds that CSS reset affects them.)
I'd try invoking arcane knowledge of CSS @namespace:
<style>
/* "page" styles */
p {
color: orange;
border: darkorange solid;
}
circle {
fill: orange;
stroke: darkorange;
}
</style>
<style>
/* "your" styles not affecting SVG */
@namespace "http://www.w3.org/1999/xhtml";
body * {
all: revert;
}
</style>
<body>
<p>
This text should be black (or in default UA colour);<br>
following circle should be orange:
</p>
<svg width="100" viewBox="-4 -4 8 8"
xmlns="http://www.w3.org/2000/svg" >
<circle r="2" stroke-width="1"></circle>
</svg>Because historically HTML and SVG still possess different namespaces, you can still use it for your advantage.
More examples:
<style>
* { /* implicit namespace is not set, so affects both HTML and SVG */ }
</style>
<style>
@namespace "http://www.w3.org/1999/xhtml";
@namespace only_html "http://www.w3.org/1999/xhtml";
@namespace only_svg "http://www.w3.org/2000/svg";
* {
/* implicit namespace is set to html, so affects only HTML, not SVG */
}
*|* {
/* affects elements from any namespace */
}
only_html|* {
/* affects only HTML elements due explicit namespace */
}
only_svg|* {
/* affects only SVG elements due explicit namespace */
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
