I'm trying to create an opacity mask over an SVG, but for whatever reason it is not covering the full SVG, and is also not scaling.
Codepen: https://codepen.io/chubbaluv/pen/rNNpjvj
svg {
postion: absolute;
}
<svg>
<!-- A bunch of paths and groups-->
<defs>
<mask id="joined-mask" maskUnits="objectBoundingBox">
<linearGradient id="tran-grad">
<stop offset="0" stop-color="#fffff" stop-opacity="0"/>
<stop offset="0.3359" stop-color="#fffff"/>
<stop offset="0.7499" stop-color="#fffff"/>
<stop offset="1" stop-color="#fffff" stop-opacity="0"/>
</linearGradient>
<rect fill="url(#tran-grad)" width="1245" height="300"/>
</mask>
</defs>
</svg>
Related
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 want to create stripe animated background but for some reason can't remove vertical lines that appear on the edge of patterns.
Here is my svg:
<svg width="500" height="500">
<defs>
<linearGradient id='stripe-gradient' x1='0%' y1='0%' x2='100%' y2='100%'>
<stop offset='0%' stop-color='#AAA'></stop>
<stop offset='24.9%' stop-color='#AAA'></stop>
<stop offset='25%' stop-color='#666'></stop>
<stop offset='49.9%' stop-color='#666'></stop>
<stop offset='50%' stop-color='#AAA'></stop>
<stop offset='74.9%' stop-color='#AAA'></stop>
<stop offset='75%' stop-color='#666'></stop>
<stop offset='99.9%' stop-color='#666'></stop>
<stop offset='100%' stop-color='#AAA'></stop>
</linearGradient>
<pattern id='stripe-pattern' width='20' height='20' patternUnits='userSpaceOnUse' >
<rect x='-20' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'>
<animate attributeName='x' from='-20' to='0' dur='0.5s' repeatCount='indefinite'></animate>
</rect>
<rect x='0' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'>
<animate attributeName='x' from='0' to='20' dur='0.5s' repeatCount='indefinite'></animate>
</rect>
</pattern>
<mask id='stripe-mask'>
<rect x='0' y='0' width='100%' height='100%' fill='url(#stripe-pattern)' ></rect>
</mask>
</defs>
<rect class="hbar thing" x="0" y="0" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect>
</svg>
I know this post is a bit old but in case you still need to solve this issue I have made it work by doubling the stripes, removing one of the rects inside the pattern and then doubling the size of the last rect, c.f., the following code:
<svg width="500" height="500">
<defs>
<linearGradient id='stripe-gradient' x1='0%' y1='0%' x2='100%' y2='100%'>
<stop offset='0%' stop-color='#AAA'></stop>
<stop offset='12.45%' stop-color='#AAA'></stop>
<stop offset='12.5%' stop-color='#666'></stop>
<stop offset='24.45%' stop-color='#666'></stop>
<stop offset='25.5%' stop-color='#AAA'></stop>
<stop offset='37.45%' stop-color='#AAA'></stop>
<stop offset='37.5%' stop-color='#666'></stop>
<stop offset='49.9%' stop-color='#666'></stop>
<stop offset='50%' stop-color='#AAA'></stop>
<stop offset='62.45%' stop-color='#AAA'></stop>
<stop offset='62.5%' stop-color='#666'></stop>
<stop offset='74.95%' stop-color='#666'></stop>
<stop offset='75%' stop-color='#AAA'></stop>
<stop offset='87.45%' stop-color='#AAA'></stop>
<stop offset='87.5%' stop-color='#666'></stop>
<stop offset='100%' stop-color='#666'></stop>
</linearGradient>
<pattern id='stripe-pattern' width='20' height='20' patternUnits='userSpaceOnUse' >
<rect x='-20' y='0' width='40' height='40' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'>
<animate attributeName='x' from='-20' to='0' dur='0.5s' repeatCount='indefinite'></animate>
</rect>
</pattern>
<mask id='stripe-mask'>
<rect x='0' y='0' width='100%' height='100%' fill='url(#stripe-pattern)'></rect>
</mask>
</defs>
<rect x="0" y="0" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect>
</svg>
I think the vertical stripes appeared as a result of some small numerical issues whenever the browser calculates the position of the two rects. Therefore, the solution is to use only one rect.
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%">
I wanna make something like torch, I know I can use CSS for that. (image with circle and positioning absolute).But in this circumstances I can't, becouse it will create lot of problems.
We have red [div] on that we have darkness[svg>rect]. The problem is how to make transparent radius circle through that darkness ?
I prepared jsfiddle for my problem, I will be pleased if someone can edit it, to achieve my demands.
http://jsfiddle.net/BXM2G/2/
<div id="box">
<svg id="dark">
<defs>
<radialGradient id="rade" r="50%" cx="50%" cy="50%">
<stop stop-color="green" offset="0%" stop-opacity="1" />
<stop stop-color="green" offset="50%" stop-opacity="1"/>
<stop stop-color="back" offset="100%"stop-opacity="1" />
</radialGradient>
</defs>
<rect x="0" y="0" height="200" width="200"/>
<circle cx="90" cy="100" r="40" style="fill:url(#rade)"/>
</svg>
</div>
You can use a mask if you want to make a transparent hole in the svg.
Some further reading on that can be found here.
An interactive example using svg masking can be seen here. The interesting part being:
<radialGradient id="radGrad">
<stop offset="0" stop-color="white" stop-opacity="1"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<mask id="mask">
<circle id="c" cx="175" cy="175" r="50" fill="url(#radGrad)"
stroke-width="6" stroke-dasharray="6.28"/>
</mask>
...
<g mask="url(#mask)">
... masked content ...
</g>
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>