I am attempting to create an arrow that looks like this using SVG elements:
This is my attempt:
As you can see the gradient gets applied to both the rect & the polygon in my SVG. Is there a way to replicate the gradient effect in the top image in my SVG?
Maybe theres a CSS way to do this? Maybe I HAVE to use a path or single polygon element to create the arrow instead of a rect & polygon?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
you can "make" a single path from two shapes by grouping them then apply the gradient to the group
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="424"
height="100"
id="svg2996">
<defs>
<radialGradient cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5" id="grad1">
<stop style="stop-color:#ffffff;stop-opacity:0" offset="0" />
<stop style="stop-color:#0d145d;stop-opacity:1" offset="1" />
</radialGradient>
<radialGradient cx="212" cy="50" r="212" fx="212" fy="50" id="radialGradient3809" xlink:href="#grad1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.23584906,0,38.207547)" />
</defs>
<g style="fill:url(#radialGradient3809);fill-opacity:1">
<rect width="212" height="50" rx="0" ry="0" x="0" y="25" />
<polygon points="424,50 212,0 212,100 " />
</g>
</svg>
codepen
I used two gradients to attempt to recreate what you were trying to do. You can adjust the center of the gradient to align with the edges of the shapes:
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="100%" cy="50%" r="100%" fx="100%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
<radialGradient id="grad2" cx="0%" cy="50%" r="50%" fx="0%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad2)"></polygon>
</svg>
Demo
Is there something wrong with a single polygon though?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<polygon points="212,0 212,25 0,25 0,75, 212,75 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
Related
Below is the code that works great in Firefox, but any attempts to animate the linear gradient's offset attribute in Chrome ended in nothing.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="900" y2="900" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Also tried using gradientUnits =" objectBoundingBox "
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Any solution to this problem will do with: SVG,css, javascript
One solution to this would be using floating numbers instead of percentages, i.e values="1;0;1" instead of values="100%;0%;100%"
svg{border:1px solid}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="50%" y2="50%" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="dodgerblue"/>
<stop offset=".52" stop-color="white">
<animate
attributeName="offset"
values="1;0;1"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="1" stop-color="gold">
<animate
attributeName="offset"
values="1;.5;1"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Here is an idea with CSS only where you can rely on two gradients and a translation/opacity animation to approximate it. I also considered a little blur effect to have a better transition between gradient.
.box {
border-radius:20px;
width:200px;
height:200px;
position:relative;
z-index:0;
overflow:hidden;
}
.box:before,
.box:after{
content:"";
position:absolute;
bottom:0;
right:0;
width:220%;
height:220%;
animation:translate 2s infinite linear alternate;
}
.box:after {
background:
linear-gradient(to bottom right,dodgerblue 0%,white 40%,gold 60%);
animation-name:translate,show;
opacity:0;
}
.box:before {
background:
linear-gradient(to bottom right,dodgerblue,white 50%,gold 50%);
animation-name:translate,fade;
}
#keyframes translate{
from {
transform:translate(48%,48%);
}
}
#keyframes show{
30%,85% {
opacity:1;
}
}
#keyframes fade{
30%,85% {
filter:blur(8px);
}
}
<div class="box">
</div>
You can always use javascript for that:
requestAnimationFrame(animateOffsets);
// if this function called as callback of requestAnimationFrame,
// so there are first argument is the time from beginning from scene start
function animateOffsets(t) {
requestAnimationFrame(animateOffsets);
t = t%5000/5000; // will change from 0 to 1 (5 sec)
t = Math.sin(t*Math.PI*2); // will change from -1 to 1
stop1.setAttribute('offset', `${50 + t*50}%`);
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="60%" y2="60%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="50%" stop-color="white" id="stop1"/>
<stop offset="100%" stop-color="gold"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Gradient attribute offset animation as background image
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff">
<animate
attributeName="offset"
values="0;1;1;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="0;1;1;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
</linearGradient>
<rect x="-45" y="0" width="70%" height="70%" rx="5%" fill="#ACA900" />
<rect x="65" y="80" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
<image x="30" y="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg" width="50%" height="50%" />
</svg>
Radial gradient effects
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<radialGradient id="myRadial"
fx="50%" fy="50%" r="80%">
<stop offset="0%" stop-color="gold">
<animate
attributeName="offset"
values="0;1.3;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
<stop offset="100%" stop-color="#EDEDED">
<animate
attributeName="offset"
values="0;1.3;1.3;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
</radialGradient>
<rect x="0" y="0" width="70%" height="70%" rx="5%" fill="#ACC400" />
<rect x="85" y="80" width="50%" height="50%" rx="5%" fill="url(#myRadial)" />
</svg>
Hey I am trying to build a joystick which is well understood and can be used by elders. The joystick need to have 4 directions: Left,Right,Top and Down and also has a pause button in the middle.
This joystick is need to be used for moving a camera.
I have found a code in the web which create for me an svg joystick.
The problem is that this joystick isn't easy to used ,and when you pressed on a direction you don't know if you click on it or not.
Also when you click on the center for stop action you don't have a feedeback for clicking.
I am looking for alternative or improvement for my current joystick.
How can I improve my current controller so I will have a feedback for clicking in svg. Can I create a stick in svg so I will know to which direction I am pointing right now?
I would be happy if someone can help me with this controller,
thanks in advance.
Edit:
I need a real visual feedback for each arrow and the stop button. If any changes are required for current svg, it is welcome.
#arrowRight:hover,
#arrowLeft:hover,
#arrowDown:hover,
#arrowUp:hover{
fill:blue;
}
<div id="joystick" style="width:20%">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#grad1)" />
<circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px" />
<circle cx="50" cy="50" r="44" fill="url(#grad3)" />
<circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" />
<path id="arrowUp" d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)" />
<path id="arrowDown" d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)" />
<path id="arrowLeft" d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)" />
<path id="arrowRight" d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)" />
</svg>
</div>
You can add an onclick function to each path. Send the direction as a parameter to this function.
function click(elem, direction) {
var arrows = document.getElementsByClassName("arrow");
//reset all arrows
for (let i = 0; i < arrows.length; i++) {
arrows[i].style.fill = "rgba(0,0,0,0.8)";
}
//Set the clicked arrow to red
elem.style.fill = "red";
};
#arrowRight:hover,
#arrowLeft:hover,
#arrowDown:hover,
#arrowUp:hover {
fill: blue;
}
<div id="joystick" style="width:20%">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#grad1)" />
<circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px" />
<circle cx="50" cy="50" r="44" fill="url(#grad3)" />
<circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" />
<path id="arrowUp" class="arrow" d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)" onclick="click(this, 'up')" />
<path id="arrowDown" class="arrow" d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'down')" />
<path id="arrowLeft" class="arrow" d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'left')" />
<path id="arrowRight" class="arrow" d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'right')" />
</svg>
</div>
I'm looking for a solution in SVG that enables several colors in one single character without any visual gradients.
Here is an example of how I want the result to look like
Here is the best solution that I can come up with. This works perfect with only 2 colors, but more colors doesn't give the result that I want.
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="33%" stop-color="blue"/>
<stop offset="33%" stop-color="red"/>
<stop offset="66%" stop-color="orange"/>
</linearGradient>
</defs>
<text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
</text>
</svg>
Use multiple stops of the same colour if you don't want gradients.
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="33%" stop-color="blue"/>
<stop offset="33%" stop-color="red"/>
<stop offset="66%" stop-color="red"/>
<stop offset="66%" stop-color="orange"/>
</linearGradient>
</defs>
<text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
</text>
</svg>
I've got an svg with a defs element, like so:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()">
<defs>
<linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d4af37"/>
<stop offset="0.14" stop-color="#fefdfb"/>
<stop offset="0.27" stop-color="#d6b23f"/>
<stop offset="0.45" stop-color="#816e26"/>
<stop offset="0.59" stop-color="#d6b23f"/>
<stop offset="0.82" stop-color="#d6b23f"/>
<stop offset="0.91" stop-color="#fff"/>
<stop offset="1" stop-color="#d6b23f"/>
</linearGradient>
</defs>
<title>StickerBorder</title>
<rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/>
<polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/>
<circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text>
</svg>
I'm appending a couple of children to this via javascript like so :
<lineargradient id="glossgrad" x1="22.3" y1="342.88" x2="227.7" y2="-12.88" gradientunits="userSpaceOnUse">
<stop offset="0" stop-color="#ff0000"></stop>
<stop offset="0.2" stop-color="#ff0000"></stop>
<stop offset="0.4" stop-color="#ff0000"></stop>
</lineargradient>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#glossgrad)"></rect>
So the lineargradient "glossgrad" is being added to the defs element and the rect is being added to the svg element. My problem is, the new appended rect doesn't appear at all. However if I change the url of the rect to the original lineargradient url it appears.
So my question is, does the 'defs' element not get updated once it has had it's initial load? Is it sort of cached or something?
I don't know how you append the new linear gradient definitions and rect element. But to answer your question, there are no issues in dynamically appending new elements to svg defs and using them.
Here is a working example:
var svg = document.getElementsByTagName("svg")[0];
var svgNS = svg.namespaceURI;
createGradient(svg,'glossgrad',[
{offset:'5%', 'stop-color':'#f60'},
{offset:'95%','stop-color':'#ff6'}
]);
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',60);
rect.setAttribute('y',80);
rect.setAttribute('width',50);
rect.setAttribute('height',50);
rect.setAttribute('fill','url(#glossgrad)');
svg.appendChild(rect);
function createGradient(svg,id,stops){
var grad = document.createElementNS(svgNS,'linearGradient');
grad.setAttribute('id',id);
for (var i=0;i<stops.length;i++){
var attrs = stops[i];
var stop = document.createElementNS(svgNS,'stop');
for (var attr in attrs){
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') ||
svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
return defs.appendChild(grad);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()">
<defs>
<linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d4af37"/>
<stop offset="0.14" stop-color="#fefdfb"/>
<stop offset="0.27" stop-color="#d6b23f"/>
<stop offset="0.45" stop-color="#816e26"/>
<stop offset="0.59" stop-color="#d6b23f"/>
<stop offset="0.82" stop-color="#d6b23f"/>
<stop offset="0.91" stop-color="#fff"/>
<stop offset="1" stop-color="#d6b23f"/>
</linearGradient>
</defs>
<title>StickerBorder</title>
<rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/>
<polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/>
<circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text>
</svg>
I want to replace a gradient for another in a svg so I need to iterate (probably recursively) over each svg item to get
I looked at the svg doc # MDN
https://developer.mozilla.org/fr/SVG/Element/ellipse
but it is broken (access denied, no exemple, lots of broken links)
and quite different of the one at MSDN
http://msdn.microsoft.com/en-us/library/ie/ff972071%28v=vs.85%29.aspx
so I search for any pointer on how to access fill property of a svg element however it has been defined.
something like a getComputedFill function
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
>
<defs>
<script>
<![CDATA[
function infothis(ref)
{
alert(ref + " " + ref.fill + " " + ref.fillOpacity); // why can't I get "url(#grad1)" and 0.5 when clicking ellipse1
//alert(ref.style.getPropertyValue("fill")); // somewhat okwhy can't I get "url(#grad2)" when clicking ellipse2
}
]]>
</script>
<linearGradient
dc:title="red black filter"
dc:rights="CC-BY"
dc:description="basic filter ranging from black to red"
id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
</linearGradient>
<ellipse id="ellipse0" cx="150" cy="170" rx="85" ry="55" fill="url(#grad2)" />
</defs>
<ellipse id="ellipse1" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" fill-opacity="0.5" onclick="infothis(this)" />
<ellipse id="ellipse2" cx="100" cy="70" rx="85" ry="55" style="fill:url(#grad2)" onclick="infothis(this)" />
<use xlink:href="#ellipse0"/>
</svg>
How about this...
alert(document.defaultView.getComputedStyle(ref, null).getPropertyValue("fill"));