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!
Related
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
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?
So, I have the following code:
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
<style>stop{stop-opacity:1}circle{fill:url(#r)}</style>
<defs>
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ce1126"/>
<stop offset="17%" style="stop-color:#e5911d"/>
<stop offset="33%" style="stop-color:#fcd116"/>
<stop offset="50%" style="stop-color:#18c063"/>
<stop offset="67%" style="stop-color:#75aadb"/>
<stop offset="83%" style="stop-color:#803ac5"/>
<stop offset="100%" style="stop-color:#00335b"/>
</radialGradient>
</defs>
<circle cx="150" cy="300" r="55"/>
</svg>
Interestingly enough, if I add stop-color:attr(c) to the CSS of the stops and change them accordingly (style="stop-color:=>c="), it doesn't work (or at least not in Safari/iOS9). Why is this?
Interesting that Safari does not support this. This seems to work in Firefox:
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
<style>
stop {
stop-opacity: 1
}
circle {
fill: url(#r)
}
</style>
<defs>
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ce1126" />
<stop offset="17%" style="stop-color:#e5911d" />
<stop offset="33%" style="stop-color:#fcd116" />
<stop offset="50%" style="stop-color:#18c063" />
<stop offset="67%" style="stop-color:#75aadb" />
<stop offset="83%" style="stop-color:#803ac5" />
<stop offset="100%" style="stop-color:#00335b" />
</radialGradient>
</defs>
<circle cx="60" cy="100" r="55" fill="url(#r)" />
</svg>
I would not recomend doing it in that way.
The most supported way should be:
Add stop-color as an attribute
Add a class or id to the stop element and add a stop-color with css.
This is should be an easy way, which will works in all browsers
<stop offset="0%" style={{ stopColor: '#ce1126' }}/>
<stop offset="17%" style={{ stopColor: '#e5911d' }}/>
<stop offset="33%" style={{ stopColor: '#fcd116' }}/>
<stop offset="50%" style={{ stopColor: '#18c063' }}/>
<stop offset="67%" style={{ stopColor: '#75aadb' }}/>
<stop offset="83%" style={{ stopColor: '#803ac5' }}/>
<stop offset="100%" style={{ stopColor: '#00335b' }}/>
The following file is a work in progress showing 3 lamps, I am trying to show text centered both horizontally and vertically in each lamp. I'm not sure whats happening but only the text for lamp3 is appearing and it is not in the correct location. The other lamps do no show the text at all.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf"/>
<stop offset="1" stop-color="#404040"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
<stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
</linearGradient>
</defs>
<g id="lamp2" transform="translate(15.0,0.0) scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">CCC</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
<g id="lamp3" transform="translate(100.0,82.0) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">EEE</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
<g id="lamp1" transform="translate(100.0,0.0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5"/>
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5"/>
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5"/>
<text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
</g>
</svg>
I really would like an elegant way of centering the text in the parent group.
JSFiddle: https://jsfiddle.net/8kouys3w/6/
clean up code
Main problem: all shapes are stacked on top of each other
other problem (fixed):
transform="translate(1154.0,0.0) scale(0.25)">There really si no reason to transfrom it that far. And scaling should also not be nesasary since you are doing it on all elements.
Your svg does not have a viewBox. This means it will not scale.
Text: The text displayed was at 0.0 (origin) not any where close to the shapes.
Other (not fixed):
WHY WOULD YOU EVER ROTATE A CIRCLE?
circle transform="rotate(90 320 240)"
Your linear gradients have a stop opacity of 0.988281 Thats a lot of decimals for a opacity really close to 1.
Im going to take a wild gues here and say your code is generated and not coded. So if your having problems with generated code you should fix those issues inside your editor, or learn the basics of svg like viewBox and the text element atleast. That would take less time then posting and answer here.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
</defs>
<g id="lamp2" transform="scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5" />
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">CCC</text>
</g>
<g id="lamp3" transform="translate(100,0) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">EEE</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
<g id="lamp1" transform="translate(200,0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
</svg>
This works...viewBox isn't required.
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<defs>
<linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
</linearGradient>
<linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
<stop offset="0" stop-color="#bfbfbf" />
<stop offset="1" stop-color="#404040" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
<stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
</linearGradient>
<linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
<stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
<stop offset="0.703125" stop-opacity="0.984375" stop- color="#06d306" />
</linearGradient>
</defs>
<g id="lamp1" transform="translate(100,0) scale(0.25)">
<title>Lamp 1</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">AAA</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
<g id="lamp2" transform="translate(200,0) scale(0.25)">
<title>Lamp 2</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5" />
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">BBB</text>
</g>
<g id="lamp3" transform="translate(200,100) scale(0.25)">
<title>Lamp 3</title>
<circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5" />
<circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5" />
<circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5" />
<text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">CCC</text>
<ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5" />
</g>
</svg>
To recap...there wasn't anything wrong with the original SVG, all that has been done was to change the values for x and y to 250 and 260.
JSFiddle: https://jsfiddle.net/8kouys3w/12/
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>