Is any idea how it can be done?
Expecting this:
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l
The basic idea here is that four rectangles that have there own linear gradient are masked off by a dotted stroke. The gradients overlap overlap each other in the corners so it looks like a continues gradient.
The dotted stroke in mask m1 has rounded line caps and then another mask (m2) is masking off half of the stroke.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"
width="500">
<defs>
<linearGradient id="top">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="DeepSkyBlue"/>
</linearGradient>
<linearGradient id="right" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DeepSkyBlue"/>
<stop offset="50%" stop-color="Green"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="bottom">
<stop offset="10%" stop-color="Red"/>
<stop offset="50%" stop-color="Orange"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="left" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="Red"/>
</linearGradient>
<mask id="m1">
<rect x="4" y="4" rx="20" width="392" height="292"
mask="url(#m2)" stroke="white" stroke-width="8"
stroke-dasharray="5 5 10 5 7 4" stroke-linecap="round"
pathLength="400" filter="url(#distort)" />
</mask>
<mask id="m2">
<rect x="4" y="4" rx="20" width="392" height="292" fill="white" />
</mask>
</defs>
<g mask="url(#m1)">
<rect width="400" height="20" fill="url(#top)"/>
<rect width="20" height="300" x="380" fill="url(#right)"/>
<rect width="400" height="20" y="280" fill="url(#bottom)"/>
<rect width="20" height="300" fill="url(#left)"/>
</g>
</svg>
I was able to implement it with pattern image.
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l
This SVG is displayed correctly on Chrome, but disappear on Mozilla and iOS. Could you please give me some insights about what's wrong with it?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="616" viewBox="0 0 450 616" fill="none">
<g filter="url(#filter1_b)" style="
">
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint1_radial)" stroke-width="3.5" style="
/* display: none; */
"/>
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint2_radial)" stroke-width="3.5"/>
<rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint3_radial)" stroke-width="3.5"/>
</g>
<defs>
<filter id="filter0_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
<filter id="filter1_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1.31579" height="1.31387">
<use xlink:href="#image0" transform="scale(0.00263158 0.00182482)"/>
</pattern>
<linearGradient id="paint0_linear" x1="73.1612" y1="38.0857" x2="463.816" y2="606.864" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.4"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(114.681 86.3485) rotate(55.7067) scale(886.206 408.172)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(251.761 296.483) rotate(58.5326) scale(410.938 284.945)">
<stop stop-color="#48E6D8"/>
<stop offset="1" stop-color="#48E6D8" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(414.269 42.5193) rotate(124.907) scale(676.798 469.762)">
<stop stop-color="#002421"/>
<stop offset="0.635417" stop-color="#002421" stop-opacity="0.364583"/>
<stop offset="1" stop-color="#002421" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Sample here: https://codepen.io/burianovata_i/pen/WNoeaLd
As #RobertLongson commented, Firefox does not support BackgroundImage pseudo inputs. So I removed that lines and it worked!
I'm trying to rebuild this yellowing effect with SVG filters only so it could be applied to any image from an external filter file with filter: url('filters.svg#yellowing').
So far I have managed to rebuild create the shapes which have to be used as an overlay to the SourceGraphic:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="300" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style><![CDATA[
rect {
mix-blend-mode: multiply;
}
]]></style>
<defs>
<linearGradient id="yellowing-fill" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(255, 145, 0)" stop-opacity="0.2" />
<stop offset="60%" stop-color="rgba(255, 230, 48)" stop-opacity="0.2" />
</linearGradient>
<linearGradient id="light-leak-fill" gradientTransform="rotate(-15, 1, 1)">
<stop offset="0%" stop-color="red" stop-opacity="0.5" />
<stop offset="45%" stop-color="red" stop-opacity="0" />
</linearGradient>
<filter id="inner-glow">
<feFlood flood-color="black" />
<feComposite in2="SourceAlpha" operator="out" />
<feGaussianBlur stdDeviation="30" result="Blur" />
<feBlend in2="Blur" />
<feComposite operator="in" in2="SourceGraphic" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#light-leak-fill)" />
<rect x="0" y="0" width="100%" height="100%" fill="url(#yellowing-fill)" />
<rect x="0" y="0" width="100%" height="100%" fill="white" filter="url(#inner-glow)" />
</svg>
But now I'm struggling converting this into a filter, I've tried the following (simplified):
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="yellowing">
<defs>
<linearGradient id="yellowing-fill" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(255, 145, 0)" stop-opacity="0.2" />
<stop offset="60%" stop-color="rgba(255, 230, 48)" stop-opacity="0.2" />
</linearGradient>
<linearGradient id="light-leak-fill" gradientTransform="rotate(-15, 1, 1)">
<stop offset="0%" stop-color="red" stop-opacity="0.5" />
<stop offset="45%" stop-color="red" stop-opacity="0" />
</linearGradient>
<filter id="inset-shadow-fill">
<feFlood flood-color="black" />
<feComposite in2="SourceAlpha" operator="out" />
<feGaussianBlur stdDeviation="30" result="Blur" />
<feBlend in2="Blur" />
<feComposite operator="in" in2="SourceGraphic" />
</filter>
<rect id="light-leak" fill="url(#light-leak-fill)" />
<rect id="yellowing" fill="url(#yellowing-fill)" />
<rect id="inset-shadow" fill="white" filter="url(#inset-shadow-fill)" />
</defs>
<feImage href="#light-leak" result="LightLeak" />
<feImage href="#yellowing" result="Yellowing" />
<feImage href="#inset-shadow" result="InsetShadow" />
<feBlend in="LightLeak" in2="Yellowing" result="Blend1" mode="multiply" />
<feBlend in="Blend1" in2="InsetShadow" result="Blend2" mode="multiply" />
<feComposite in="Blend2" in2="SourceGraphic" operator="in" />
</filter>
</svg>
There must be several problems with this approach, most obviously, it appears wrong not to have any sizes declared anywhere.
Would it be better to put the above SVG image in a separate file e.g. yellowing_overlay.svg and then write a filter to composite it over the SourceGraphic in filters.svg#yellowing (by use of feImage) or is there a way to build the overlay in the filters file itself?
UPDATE
Having the yellowing overlay in a separate yellowing_overlay.svg and then using a filter to merge it with SourceGraphic seems more promising, however, it also doesn't work.
Since Stack Overflow does not yet support non-raster-image file uploads, I've created a gist with two files:
yellowing_overlay.svg gist as shown in the fiddle above.
filters.svg gist with the actual blending.
As well as the following sample image to be yellowed:
Putting the pieces together:
.filter-yellowing {
filter: url('https://gist.githubusercontent.com/svoop/38aba6a0f11c1d7c51148e410fb636c8/raw/9a9311dd25e10e75731b4acd98b3f6583e413b31/filters.svg#yellowing');
border: 1px solid black;
}
<img src="https://i.stack.imgur.com/iLnN5.jpg" width="400" height="300" class="filter-yellowing">
Running it... nothing on Firefox (Mac), unfiltered source image on Chrome (Mac) and Safari (Mac). What am I doing wrong?
I am new here and may have some questions which can be too simple.
Recently I have to learn svg ,and I found something puzzled.
This one
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.13" fy="0.13">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>
What happen to top left corner ?
I am weak in Math and I am aware that this is a mathmatical problem.May anyone help me?
You have mapped the 0% of the gradientStop (your fx/fy) to a point outside the radius of the gradient (your cx/cy), and it's not displaying. Note that when you change your fx/fy to just inside the gradient area, it displays just fine. (This is a Chrome bug - if the focal point is specified outside the gradient area, it's supposed to be set at the closest point on the area's perimeter. This is correctly handled in IE and Firefox. I guess I'm filing a bug on this.)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>
Try this -
I changed both fx and fy to 50%
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
<radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="50%" fy="50%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>
I have a jsfiddle here - http://jsfiddle.net/apbuc773/
I'd like to create a star using svg.
I'd like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape.
Also is it possible to half fill the star shape.
I'd like to use this for a star rating but I need half and maybe quarter fills.
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/>
</svg>
You can alternatively do this with a filter. Here is one that animates the fill:
<svg height="210" width="500">
<defs>
<filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
<animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
</defs>
<polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="fill:white;stroke:red;" />
</svg>
Here is a example: http://jsfiddle.net/apbuc773/11/
Gradient can be used like this:
<svg height="210" width="500">
<defs>
<linearGradient id="half">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="red" />
<stop offset="50%" stop-color="white" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<g fill="url(#half)" stroke="blue" stroke-width="2">
If you don't want to change your polygon points, just apply this polygon twice: one time with stroke and one time without.
I've noticed the comment of the accepted answer, and here is how you fill an custom shape:
<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="heart">
<path d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/>
</clipPath>
</defs>
<rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clip-path="url(#heart)" />
<rect x="0" y="50%" fill="red" width="100%" height="100%" clip-path="url(#heart)" />
</svg>