I've made a simple SVG image but the background isn't applied whereas it should.
I got the following code so far:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="content" width="100%" height="100%" viewbox="0 0 800 1000" preserveaspectratio="xMidYMid meet" version="1.1">
<defs>
<lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="100%" stop-color="orange" stop-opacity="0.8"/>
</lineargradient>
<lineargradient id="gradientLine" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="orange" stop-opacity="0"/>
<stop offset="100%" stop-color="orange" stop-opacity="0.6"/>
</lineargradient>
</defs>
<g id="vis" transform="translate(330,670)">
<path fill="url(#gradient)" d="M-112.87131548350527,-640.1250394579351A650,650 0 0,1 222.31309316168483,-610.8002035108404L0,0Z"/>
<circle r="35" stroke="orange" fill="orange" opacity="1"/>
<circle r="3" stroke="black" fill="black" opacity="1"/>
<line x1="0" x2="-85" y1="0" y2="0" fill="black" stroke="black"/>
</g>
</svg>
The path is black but it should be a gradient going from white to orange.
Apparently, when I run my code in jsfiddle, it displays the good result. But when I try to display the SVG in an img tag or directly in my browser, I got a black background. Any idea ?
Did I make something wrong or is this a common issue ?
Thanks for your help.
I think the problem is here:
<lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
Fixed:
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
Related
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 try to build a reflection of my text with gradient. But the reflection (the second text) has an off set and by applying the rotation the letters are shifting.
body {
background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="140" viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000000" />
<stop offset="10%" stop-color="#666666" />
</linearGradient>
</defs>
<text rotate="180" x="310" y="80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right">Multimediale Kunst</text>
</svg>
This is happening because the rotate attribute rotates individual start points. So wider characters end up further away from narrow characters and vice-versa.
The rotate attribute is the wrong approach anyway. If you want to vertically flip the text, then you should use a transform that scales the object on the y axis by -1.
body {
background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="140" viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="50%" stop-color="#000000" />
<stop offset="100%" stop-color="#666666" />
</linearGradient>
</defs>
<text x="260" y="-80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right" transform="scale(1,-1)">Multimediale Kunst</text>
</svg>
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>
After it is placed on Blogger, the hue of the linear gradient drops/lessens dramatically.
How do I prevent this from happening?
Is there any possible way I can fix this so it stays the same?
https://jsfiddle.net/cs311dLn/1/
https://testpage34567.blogspot.com/
The linear-gradient in the images are the 2 lines in the middle going down.
.html
Screenshot
Blogger:
Screenshot
<svg width="260" height="194">
<defs>
<clippath id="circleView">
<circle cx="130" cy="97" r="85" fill="orange"></circle>
</clippath>
</defs>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"> </image>
<image x="40" y="7" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
<svg width="260" height="194">
<defs>
<lineargradient id="MyGradient">
<stop offset="0%" stop-color="transparent"></stop>
<stop offset="31.9%" stop-color="transparent"></stop>
<stop offset="31.9%" stop-color="#0059dd"></stop>
<stop offset="33.2%" stop-color="#0059dd"></stop>
<stop offset="33.2%" stop-color="transparent"></stop>
<stop offset="66.8%" stop-color="transparent"></stop>
<stop offset="66.8%" stop-color="#0059dd"></stop>
<stop offset="68.1%" stop-color="#0059dd"></stop>
<stop offset="68.1%" stop-color="transparent"></stop>
<stop offset="100%" stop-color="transparent"></stop>
</lineargradient>
</defs>
<rect fill="url(#MyGradient)" x="0" y="0" width="260" height="194"></rect>
</svg>
</svg>
I can use linear gradient in SVG with defs-section like:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100"
style="fill:url(#myLinearGradient1)" />
</svg>
Can I use linear gradient without defs-section? I find something like this:
<rect style="fill:lineargradient(foo)">
<defs> is only needed for structuring purposes, the elements in it are not displayed, but since a gradient can only be visible when applied to a shape or another element, you can define it in any place of the document.
But you still have to stick to the correct syntax:
<rect style="fill:url(#myLinearGradient1)" ... />
Yes you can indeed have a gradient without needing to have a defs element; you simply put the gradient element anywhere else in the code instead, for example like this:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100"
style="fill:url(#myLinearGradient1)" />
</svg>