I'm trying to program a graph like this one:
I tried with SVG, but it's not very good since I had to use 2 different rectangles and didn't manage to get only the 4 edges to be rounded.
Here's my code:
<svg width="400" height="250">
<defs>
<linearGradient id="solids" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="solids2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</linearGradient>
</defs>
<text x="135" y="12" style="fill:black;">Conservadorismo
<tspan x="150" y="240">Liberalismo</tspan>
<tspan x="20" y="125">Esquerda</tspan>
<tspan x="305" y="125">Direita</tspan>
</text>
<rect x="100" y="20" rx="20" ry="20" width="200" height="100" style="fill:url(#solids); opacity:0.76" />
<rect x="100" y="120" rx="20" ry="20" width="200" height="100" style="fill:url(#solids2); opacity:0.76" />
<line x1="100" y1="120" x2="300" y2="120" style="stroke:black;stroke-width:2" />
<line x1="200" y1="20" x2="200" y2="220" style="stroke:black;stroke-width:2" />
</svg>
What should I do to fix it or do it better?
I would use ordinary <rect> objects without rounded corners, and apply a clipPath to the whole drawing to round off the corners.
Here's a simple example:
<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
<clipPath id="roundRect">
<rect x="10" y="10" rx="20" ry="20" width="380" height="380"/>
</clipPath>
</defs>
<g clip-path="url(#roundRect)">
<rect fill="#0a0" stroke="none" x="10" y="10" width="190" height="190"/>
<rect fill="#f00" stroke="none" x="200" y="10" width="190" height="190"/>
<rect fill="#0bf" stroke="none" x="10" y="200" width="190" height="190"/>
<rect fill="#fd0" stroke="none" x="200" y="200" width="190" height="190"/>
</g>
</svg>
Related
I am trying to create a svg pattern where size of it is relative to shape to which is applied. Pattern should consist of rect with linearGradient and text elements which repeats in x-axis n-times or every n pixels and is vertically aligned in middle of rect.
The results should look like this.
I have tried following approaches.
<svg width="100%" height="100">
<defs>
<linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#c6c6c6" />
</linearGradient>
<pattern id="pattern" width="25%" height="100%">
<rect width="100%" height="100%" fill="url(#gradient)"></rect>
<text x="10" y="50%" dx=50 fill="red">test</text>
</pattern>
</defs>
<rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>
This approach gives the result I want but the size of pattern is not relatve to shape to which is applied and fails when shape is resized, to solve this issue I have tried to create a pattern with patternContentUnits="objectBoundingBox" but then I am having problems positioning the text.
<svg width="100%" height="100%">
<defs>
<linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#c6c6c6" />
</linearGradient>
<pattern id="pattern" patternContentUnits="objectBoundingBox" width="25%" height="100%">
<rect width="1" height="1" fill="url(#gradient)"></rect>
<text x="0.1" y="0.5">test</text>
</pattern>
</defs>
<rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>
objectBoundingBox units are in the range [0, 1] so 10 is too big.
You'll need to use a suitable font-size too.
<svg width="100%" height="100%">
<defs>
<linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#c6c6c6" />
</linearGradient>
<pattern id="pattern" patternContentUnits="objectBoundingBox" width="25%" height="100%">
<rect width="1" height="1" fill="url(#gradient)"></rect>
<text transform="scale(0.2, 1)" x="0.1" y="0.5" font-size="0.1">test</text>
</pattern>
</defs>
<rect width="1000" height="100" fill="url(#pattern)"></rect>
</svg>
I have this gradient that uses userSpaceOnUse.
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
I want to rewrite it to use objectBoundingBox but be rendered the same. How can I do this?
I imagine the rewritten SVG would be close to:
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
This answer (https://stackoverflow.com/a/50624704/1283776) indicates that I need to use a transform, but I haven't been successful in found a solution.
<!-- https://stackoverflow.com/questions/22214999/svg-linear-gradient-independent-of-the-shape-coordinates -->
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0.5" gradientUnits="objectBoundingBox" gradientTransform="scale(1, 2)">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
I am drawing something here as you can see.
But there is a problem: the lines at the very top and very bottom of the image (the black "ruler") are only half the width because the "base" of the line is in the center.
For a text field, I was able to reposition the dominant-baseline and thus position my texts perfectly. However, a line (or path) doesn't seem to have a baseline.
How can I make sure my lines are at the very top and very bottom? Is the only way to do this to hard position them at the line width / 2? I tested this out, and it works perfectly, however, I'm not the biggest fan of hard coding these numbers. Is there a way not to hard code this?
Here's my code and my example image:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0" y2="0" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="100%" y2="100%" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a Fiddle if you want to try it out. Just zoom in really far.
https://jsfiddle.net/jkom2x8f/1/
Your solution is the correct solution. It is the only real solution. There is nothing wrong with it.
It seems that after a lot of searching around and reading the comments, I concluded that hard coding the y positions to 0.5 and 199.5 is the only way to do it:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0.5" y2="0.5" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="199.5" y2="199.5" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a fiddle:
https://jsfiddle.net/jkom2x8f/5/
I am making two gradients: one in objectBoundingBox units and another in userSpaceOnUse. The idea is to make them look the same. But somehow they are different. Here is the svg file.
<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="user-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="100">
<stop stop-color="orange" offset="0"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
<linearGradient id="box-grad" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="orange" offset="0"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#user-grad)"/>
<rect x="250" y="0" width="200" height="100" fill="url(#box-grad)"/>
</svg>
Here is what it looks like
Shouldn't they look the same?
Shouldn't they look the same?
No. When using object bounding box coordinates, you are basically transforming a 1x1 square onto your rectangle. So the 0 to 1 coordinates are stretched to fit the rectangle. Thus causing the gradient to stretch also.
If you want them to look the same, you would need to apply a gradientTransform, to your userSpaceOnUse one, that applies the equivalent stretch.
<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="user-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="100" gradientTransform="scale(2, 1)">
<stop stop-color="orange" offset="0"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
<linearGradient id="box-grad" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="orange" offset="0"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#user-grad)"/>
<rect x="250" y="0" width="200" height="100" fill="url(#box-grad)"/>
</svg>
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>