The border property not getting applied on SVG text. I do not want to use the outline property as it does not have support to give different colour on different sides, neither do I want to use additional svg elements like rect or path as it would make my task more complicated as a whole. Please guide how can I apply border css on SVG text element.
<body>
<style>
#abc {
border: 1px solid green;
}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
<body>
<style>
#abc {
border: 1px solid green;
}
</style>
<svg height="40" width="100" id="abc">
<text x="10" y="25" fill="red" >I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
<!DOCTYPE html>
<html>
<body>
<style>
.abc { height: 25px;
border: 1px solid green;
width: 88px;}
</style>
<svg class="abc">
<text x="5" y="18" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Related
The following code displays SVG text with dashed outline of the the width 2px. I want to make its left outline of green colour by adding a css class. Similarly for other sides want to change colour of outline using css class instead of standard Black colour. I tried giving border but was not getting reflected. Please guide how to do.
<!DOCTYPE html>
<html>
<body>
<style>
#abc { outline:dashed; outline-width:2px;}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
please see this code.
<!DOCTYPE html>
<html>
<body>
<style>
#abc { outline:dashed; outline-width:2px; outline-color:green}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
I came across a problem in Edge when applying border-radius and padding to an inline svg. In this specific combination the bottom of the svg is cut off and can't be shown by using overflow:visible. The following image shows the result in Edge:
I setup a basic example illustrating the behaviour here:
https://next.plnkr.co/edit/IIuU109SfZNJFDb8
Example code to reproduce:
<!doctype html>
<html>
<head>
<style>
svg {
border: 1px solid black;
border-radius: 50%;
padding: 40px;
overflow: visible;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Is there any chance to get the overflow to work in Edge the same way as in Chrome or Firefox?
I would remove the padding and to compensate I would change the viewBox="-20 -10 240 240"
svg {
border: 1px solid black;
border-radius: 50%;
overflow: visible;
}
<svg viewBox="-20 -10 240 240" width="240" >
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.
Chrome should support an inline svg clip-path according to this.
And full support according to MDN.
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>
External SVG files are not supported by Chrome at the moment.
You can check this here:
https://caniuse.com/#search=CSS%20clip
Here is what they say about the Partial support for Chrome:
Partial support refers to supporting shapes and the url(#foo) syntax
for inline SVG, but not shapes in external SVGs.
I cannot figure out why the style doesn't apply to rectangle.
style
<style>
.bar {
width: 100;
height: 100;
fill: green;
}
</style>
svg
<body>
<svg width="100" height="100">
<rect class="bar"/>
</svg>
</body>
when I change according to joe_young's suggestions, it works in Chrome but not in Firefox:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
.bar {
width: 100px;
height: 100px;
fill: green;
}
</style>
</head>
<body>
<svg width="100" height="100">
<rect class="bar" />
</svg>
</body>
</html>
As for your problem, turns out that firefox doesn't like the SVG's styles in the <style> tags, you need to inline them:
<svg width="100" height="100">
<rect class="bar" width="100" height="100px" style="fill: green"/>
</svg>
You're trying to use an SVG element, <rect>, so it needs to go within the <svg> tags
Also, when using it with CSS (as you're doing here), your width and height values need a unit, here px
.bar {
width: 100px; /* You need to include the 'px' here'*/
height: 100px;
fill: green;
}
<svg width="100" height="100">
<rect class="bar" />
</svg>
It needs to be enclosed in an svg tag.
Reference for further reading.
I'm trying to use the following CSS to automatically set the style for <g> Elements.
<style type="text/css">
g[inkscape|label="Site"] {
fill: blue;
stroke: red;
stroke-width: 3
}
g[inkscape|label="Building"] {
fill: black;
stroke: red;
stroke-width: 3
}
</style>
However the elements remain without fill or stroke settings set.
Selecting another attribute without a namespace works fine.
Thank you.
This depends what the context of the question is. Is the SVG a stand-alone file, embedded in an xhtml file (i.e. served as application/xhtml+xml) or embedded in an html file (i.e. served as text/html)
If it's standalone SVG, you can do
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
#namespace inkscape "http://www.inkscape.org/namespaces";
g[inkscape|label="Site"] { fill: green; }
</style>
<g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
<rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
</g>
</svg>
See http://alohci.net/static/svg_ns.svg
If it's in an XHTML file, you can do
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#namespace inkscape "http://www.inkscape.org/namespaces";
g[inkscape|label="Site"] { fill: blue; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
<rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
</g>
</svg>
</body>
</html>
See http://alohci.net/static/svg_ns.xhtml
If it's in an html file, it's a little different because the html parser doesn't support custom namespaces. Instead you have to treat the attribute's name as if it was just a normal name with a colon in it. So you'd do
<!DOCTYPE html>
<html>
<head>
<style>
g[inkscape\:label="Site"] { fill: yellow; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
<rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
</g>
</svg>
</body>
</html>
See http://alohci.net/static/svg_ns.html
Small addition to #alohci’s answer: The attribute names used in CSS must be all lowercase in some browsers. See the following example where the line is orange but not 10 px wide in Firefox 33 and IE 11. Google Chrome 39 does paint it 10 px wide.
<!DOCTYPE html>
<html>
<head>
<style>
/** Works **/
path[cwl\:feedtype="hello"] {
stroke: #fa0;
}
/** Does not work always; attribute name must be lowercase */
/** (names are case insensitive) */
path[cwl\:feedType="hello"] {
stroke-width: 10;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cwl="http://www.example.com/2014/cwl">
<path d="M0 0 L100 100" cwl:feedType="hello"/>
</svg>
</body>
</html>
Small update to #Alhoci's answer (2019). The relevant namespace for Inkscape SVG as XHTHML has changed from
#namespace inkscape "http://www.inkscape.org/namespaces";
to
#namespace inkscape "http://www.inkscape.org/namespaces/inkscape";
(p.s. For other people using SVGInject or other ways of dynamically loading SVGs, use #Alhoci's second answer for XHTML with the updated namespace!)