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.
Related
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>
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 would like to animate an svg element and let it scale(2). This works fine but the problem is that my element has an 'x' and 'y' value. Because of this the scale moves the element to a different position.
But I would like to scale it without moving it to a different position. The 'x' and 'y' values are defined somewhere else and I don't would like to "hardcode" the values in my css.
And I don't want to use JS it shoudl be plane css if possible.
Code:
.hello {
transition: 1s;
height: 100px;
width: 100px;
margin: 100px;
background-color: red;
transform-origin: center center;
position:relative;
}
.hello:hover {
transform: scale(4);
}
<use
id="=test"
xlink:href="#but"
x="100" y="20"
width="100%"
height="100%"
class="hello">
<title
id="title31">
I am an example toolTip
</title>
</use>
A code example can be found here:
https://jsfiddle.net/6agd23cL/3/
remove the x and y attributes and increase the translate on the parent <g> element to compensate.
.hello {
transition: 1s;
height: 100px;
width: 100px;
margin: 100px;
background-color: red;
transform-origin: center center;
position:relative;
}
.hello:hover {
transform: scale(4);
}
<div id="container" style="width: 100%; height: 100%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="target"
width="3600"
height="4100"
style="top:0;left:0;"
version="1.1">
<defs
id="styles">
<g
id="but">
<style
id="style11">
.cls-1{fill:#ffc60b;}.cls-2{stroke:#231f20;stroke-width:0.5px;}.cls-3{fill:#fff;opacity:0.1;}
</style>
<rect
id="Frame"
width="12"
height="12"
x="0.25"
y="0.25"
class="cls-1"
rx="2"
ry="2" />
<circle
id="circle14"
cx="6.25"
cy="6.25"
r="4.5"
class="cls-2" />
<circle
id="Highlight"
cx="6.25"
cy="6.25"
r="3"
class="cls-3" />
</g>
</defs>
<g
id="view"
transform="translate(114.386917,29.7722462)">
<use
id="=test"
xlink:href="#but"
width="100%"
height="100%"
class="hello">
<title
id="title31">
I am an example toolTip
</title>
</use>
</g>
</svg>
</div>
</html>
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!)
This is a real css-challenge, I don't think this is possible:
I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:
fiddleLink
Any help appreciated
You can use svg to achieve this effect: http://jsfiddle.net/xTd6Y/4/
<div id="image-wrapper">
<svg id="svg-1" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/300" />
</svg>
<svg id="svg-2" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-2" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/301" />
</svg>
<svg id="svg-3" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-3" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/302" />
</svg>
</div>
<svg id="svg-defs">
<defs>
<clipPath id="clip-triangle">
<polygon points="0, 200 100, 0 200, 200"/>
</clipPath>
</defs>
</svg>
css
body {
background-color: #e0e0e0;
}
#image-wrapper {
position: relative;
}
.svg-background, .svg-image {
clip-path: url(#clip-triangle);
}
.svg-image {
visibility: hidden;
}
.clip-svg .svg-image:hover {
visibility: inherit;
}
/* size and positioning */
svg.clip-svg {
position: absolute;
height: 250px;
width: 250px;
}
#svg-1 {
top: 110px;
left: 50px;
}
#svg-2 {
top: 40px;
left: 140px;
}
#svg-3 {
top: 160px;
left: 250px;
}
The clipping path is defined in svg#svg-defs, and can be set to whatever you like.
Image attributes are visible to / accessible by js and css.
You can apply the clipping path to any html element with css of
myElement {
clip-path: url(#clip-triangle);
}
but this is only reliable on firefox so far as I can tell.
Note: solution only tested on FF and chrome
note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area