I have an svg rect chart like:
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g>
<rect width="14.55" height="40%" x="0" y="0" fill="black"></rect>
<rect width="14.55" height="20%" x="50" y="0" fill="green"></rect>
<rect width="14.55" height="80%" x="100" y="0" fill="red"></rect>
<rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
<rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
<rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
</g>
</svg>
</div>
What I want to do is to display it upside down.
The code and a given solution, are coming from http://jsfiddle.net/rhvP8/5/
Although, I want to keep each bar in the same X place. So, rotation approach is not that useful in this case.
Any help is welcome.
Rotation of the x-axis only seems be be what you require.
svg {
border: 1px solid green;
transform: rotateX(180deg);
}
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g>
<rect width="14.55" height="40%" x="0" y="0" fill="black"></rect>
<rect width="14.55" height="20%" x="50" y="0" fill="green"></rect>
<rect width="14.55" height="80%" x="100" y="0" fill="red"></rect>
<rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
<rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
<rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
</g>
</svg>
</div>
Related
Any idea why the rotation does not seem to take place in the clip path coordinates? 0.5 0.5 should denote the center of the shape, i.e. where the two squares meet.
svg {
background: green;
}
<svg width="100" height="100" viewBox="0 0 100 100">
<clipPath id="rel" clipPathUnits="objectBoundingBox" transform="rotate(20 0.5 0.5)">
<rect width="0.5" height="0.5"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5"/>
</clipPath>
<rect width="100" height="100" x="0" y="0" clip-path="url(#rel)" fill="red"/>
</svg>
I expected to see something like this:
svg {
background: green;
}
<svg width="100" height="100" viewBox="0 0 100 100">
<clipPath id="abs" transform="rotate(20 50 50)">
<rect width="50" height="50"/>
<rect x="50" y="50" width="50" height="50"/>
</clipPath>
<rect width="100" height="100" x="0" y="0" clip-path="url(#abs)" fill="red"/>
</svg>
I have found an SVG layer on the net. There should be a transparent hole in it. But I don't know how to change the colour around the hole from black to e.g. #5BBB74.
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<circle cx="50" cy="20" r="10" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity=""/>
</svg>
You can add fill property to the rect affected by the mask.
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<circle cx="50" cy="20" r="10" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="" fill="#5BBB74"/>
</svg>
So I've created a page with some colorful SVG images in it, and I want them to be grayed at hormal state, and shows color while hovered.
svg {
width: 200px;
margin: 50px;
}
svg * {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>
As one can see, SVGs have different colored elements, also some elements are grouped. This is pretty simplified example, but the real images are much more complex, with massive transform-s so I can't easily remove grouping.
Both images work perfect and changes colors while hovered, but the first image does it instantly while the the second has 1 second delay before animation starts.
Searching for the solution I've found that if an elemend is wrapped with a single <g> tag it has the animation delay, but if there no <g> or two of them, no delay occurs.
Firefox animates both images with no animation delay.
By the moment I ungrouped elements by hands, but obviously it's not a good solution, so the question is how it can be solved without changing files at all ?
A pretty sneaky bug, but easily solved: just restrict the child selector to non-g elements:
svg {
width: 200px;
margin: 50px;
}
svg :not(g) {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>
I have an SVG with four coloured blocks that I want to clip by a rotated ellipse. It works as expected in Chrome and Safari, but Firefox (63.0.3 on Mac) ignores the transformation of the ellipse.
Here is a CodePen that illustrates the issue.
SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
<defs>
<clipPath id="myClip">
<ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" />
</clipPath>
</defs>
<g class="clip-this">
<rect class="color-1" x="0" y="0" width="250" height="250" />
<rect class="color-2" x="250" y="0" width="250" height="250" />
<rect class="color-3" x="0" y="250" width="250" height="250" />
<rect class="color-4" x="250" y="250" width="250" height="250" />
</g>
</svg>
CSS
#ellipse{
transform:rotate(-30deg);
transform-origin:center;
}
.color-1,.color-4{
fill:#ababab;
}
.color-2,.color-3{
fill:#3a3a3a;
}
svg {
max-width: 400px;
}
.clip-this{
clip-path: url(#myClip);
}
This is a known bug. As a workaround, you can use the SVG transform attribute instead of the CSS property. Note that for full browser compatibility the transform function must not have units for the numbers, and the center of rotation is noted in userspace coordinates.
.color-1,.color-4{
fill:#ababab;
}
.color-2,.color-3{
fill:#3a3a3a;
}
svg {
max-width: 400px;
}
.clip-this{
clip-path: url(#myClip);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
<defs>
<clipPath id="myClip">
<ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" transform="rotate(-30, 250, 250)" />
</clipPath>
</defs>
<g class="clip-this">
<rect class="color-1" x="0" y="0" width="250" height="250" />
<rect class="color-2" x="250" y="0" width="250" height="250" />
<rect class="color-3" x="0" y="250" width="250" height="250" />
<rect class="color-4" x="250" y="250" width="250" height="250" />
</g>
</svg>
<clipPath id="clip1">
<rect x="10" y="222" height="30" width="50" rx="5" />
</clipPath>
<image .... clip-path="url(#clip1)" />
It cuts the outer space of the image. But I want to cut a hole into the image. How can I achieve it?
For your purposes, you can use a mask
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<rect x="50" y="50" height="50" width="100" rx="5" fill="black" />
</mask>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="http://placeimg.com/200/200/any"
mask="url(#hole)" >
</image>
</svg>