Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.
I have this CODEPEN and here are my issues:
I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180:
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</mask>
In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:
<use xlink:href="#myText" mask="url(#myMask)" />
The text appears black as if no gradient was applied. The gradient I defined is purple..
Thanks!
if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" />
</linearGradient>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<use xlink:href="#myText" fill="url(#lgrad)" />
</svg>
you only need masks if you want to seperate the opacity from your fills:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<g mask="url(#myMask)">
<use xlink:href=" #myText" transform="translate(0,-50) " fill="red " />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="50%" height="50%" fill="white" />
<rect x="50%" y="0" width="50%" height="50%" fill="#333" />
<rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" />
<rect x="50%" y="50%" width="50%" height="50%" fill="white" />
<circle cx="50%" cy="50%" r="15%" fill="black" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="beige" />
<g mask="url(#myMask)">
<use xlink:href="#myText" transform="translate(0,-50)" fill="red" />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
I am trying to create a color palette using SVG. For this, I about many rect elements and just change the style for each one.
The issue is that, sometimes, there is tiny sliver of white between the elements, as in this image:
This snapshot was taken in Chrome on OSX. Safari looks similar.
In my code viewBox is not constant and can vary depending on the number of rectangles. Additionally, width and height can also vary depending on chosen resolution. In other words, I can't play with these to make this one look right.
I tried creating each rect a bit wider than necessary, but the effect was the same. In teh above picture the top row has a width of 100.1, while the bottom has 100. Making the width 101 worked, but I can't use this since in some cases the expected width of a rect could be single digits, so an extra 1 to the width is significant overlap.
I tried adding a stroke, but that didn't work as the required width to make this work depends on viewBox and rect sizes.
Have you seen this problem?
Here is my code:
<html>
<body>
<svg width="1000" height="1000" viewBox="0 0 5000 5000">
<g>
<rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
<rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
<rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
<rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
<rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
<rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
<rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
<rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
<rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
<rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
<rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
<rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
<rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
<rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
<rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
<rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
<rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
<rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
<rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
<rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
<rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
<rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
<rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
<rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
<rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>
<rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
<rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
<rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
</g>
</svg>
</body>
</html>
That's antialiasing, try set shape-rendering="crispEdges" as an attribute on the <g> parent element to disable that.
<html>
<body>
<svg width="1000" height="1000" viewBox="0 0 5000 5000">
<g shape-rendering="crispEdges">
<rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
<rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
<rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
<rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
<rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
<rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
<rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
<rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
<rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
<rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
<rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
<rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
<rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
<rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
<rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
<rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
<rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
<rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
<rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
<rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
<rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
<rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
<rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
<rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
<rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>
<rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
<rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
<rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
</g>
</svg>
</body>
</html>
My goal is to have the first group of 3 squares be blue and the next group of 3 squares be red. To minimize code, I want to take advantage of grouping in SVG. All the rectangles remain blue. I have tried inline styling on the second group element and on the use element, but that doesn't solve the problem. Thank you for your assistance.. Here's the code:
<svg width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.blue {fill:blue;}
.red {fill:red;}
</style>
<g id="g1" class="blue">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
<g class="red">
<use xlink:href="#g1" transform="translate(0,315)" />
</g>
Here are changes from above that now have it working:
<g class="blue">
<g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
</g>
<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
<!-- <g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g> -->
</g>
... I commented out some of the old svg as well.
Here's the solution in a clearer form (some of the commented code above, actually came from further experimenting).
<svg width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.blue {fill:blue;}
.red {fill:red;}
</style>
<g class="blue">
<g id="g1">
<rect x="0" y="0" width="100" height="100" />
<rect x="0" y="105" width="100" height="100" />
<rect x="0" y="210" width="100" height="100" />
</g>
</g>
<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
</g>
Looks like styling needs to be done at a level above a group in my case and that the as Robert pointed out will retrieve the previous group as written.
I am struggling with an svg to blur background under text on Google Chrome 36.0.1985.125 linux. The svg is like
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" in="BackgroundImage" stdDeviation="2" />
<feBlend in2="blurOut" in="SourceGraphic" mode="normal" />
</filter>
</defs>
<g enable-background="new">
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
Fiddle: http://jsfiddle.net/2o2trpc1/
Thus I would like to blur "BACKGROUND" behind "text", but "text" does not appear at all. Can someone please look at this what I am doing wrong? Where can I check that the browser version supports filtering background image?
thanks a lot,
Balazs
You will have to work around the lack of BackgroundImage. There are multiple ways to do that, if your code is as simple as the fiddle you posted something like this could work:
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feGaussianBlur result="blurOut" stdDeviation="2" />
</filter>
</defs>
<g>
<text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24" filter="url(#blur)">BACKGROUND</text>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26">text</text>
</g>
</svg>
</body>
See fiddle.
Another option is to use <feImage xlink:href="#background"/> in the filter, instead of using BackgroundImage. This can bring in whatever element you want.
<body>
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#background"/>
<feGaussianBlur stdDeviation="3" />
<feBlend in="SourceGraphic" mode="normal" />
</filter>
<text id="background" x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
</defs>
<g>
<text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
</g>
</svg>
</body>
See fiddle.