SVG Gradients in Web Application

Discuss SVG code, accessible via the XML Editor.
Hallaghan
Posts: 7
Joined: Fri Dec 03, 2010 3:24 am

SVG Gradients in Web Application

Postby Hallaghan » Fri Dec 03, 2010 3:43 am

Hello community,

I've been using Inkscape and SVG for only a few days from now so I am quite inexperienced with it.
I'm a .NET Web Developer, my interest for SVG was brought into by my supervisor when he used Inkscape to create SVGs that symbolize racks in a warehouse.
So far so good, the diagram looked very nice. We used jQuery to give actions to our SVG images, so when we click the racks, we are able to see the goods inside them.
The problem we are facing is with Gradients. We wanted to apply a linear gradient to our SVG rects to show 2 colors, red and green. By applying a defined percentage to each color we display the occupation rate on the rack. I've declared a couple of linear Gradients on the defs of the SVG and then declared them in each rect like this: fill="url(#myGradient)".
Unfortunately, they were rendered completely grey.

Here is the code of a rendered rect:

Code: Select all

<rect style="fill-opacity: 0.784884; stroke: rgb(0, 0, 0); stroke-width: 0.447214; stroke-miterlimit: 1; stroke-opacity: 0.784884; stroke-dasharray: none;" fill="url(#myGradient)" id="R5" width="600" height="80" x="70" y="422.36218" class="wz-rack" inkscape:label=""/>


Has anyone ever faced this problem? Do you know of any solution? If you need me to post more code, including the jQuery code, just ask me.

My best regards,
Hallaghan

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG Gradients in Web Application

Postby ~suv » Fri Dec 03, 2010 6:44 am

Hallaghan wrote:I've declared a couple of linear Gradients on the defs of the SVG and then declared them in each rect like this: fill="url(#myGradient)".
Unfortunately, they were rendered completely grey.

Here is the code of a rendered rect: (…)
Could you post the code of the gradient definitions (or the <defs> section of the SVG file) too, or attach a sample SVG file with both the defined gradients and objects referencing them?

Hallaghan
Posts: 7
Joined: Fri Dec 03, 2010 3:24 am

Re: SVG Gradients in Web Application

Postby Hallaghan » Fri Dec 03, 2010 7:57 pm

Hi suv,

Here is my <defs> section:

Code: Select all

<defs id="defs4">
    <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective10"/>
    <inkscape:perspective id="perspective3612" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3652" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3680" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3706" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3736" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3758" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2833" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2859" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2886" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2840" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2862" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2842" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2864" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2886-4" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2908" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2841" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2863" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2885" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2907" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2907-4" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2943" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2965" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2987" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3012" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3037" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3059" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3081" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3103" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3125" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3147" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3169" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3191" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3191-1" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3191-18" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3191-3" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3276" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4083" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4132" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3764" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3124" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3155" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3186" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3217" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3248" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3279" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3310" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3341" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3372" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3403" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3434" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3465" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3496" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3527" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3558" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3613" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3668" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3723" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective5296" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3977" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3977-5" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4053" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4102" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4151" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4200" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4249" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4298" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4347" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4396" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4445" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4494" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4603" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4712" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective4821" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3024" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3046" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3074" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3111" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3166" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3257" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3375" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3400" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3431" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3474" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3541" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3608" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective2984" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3006" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3031" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3063" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3091" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3119" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3119-1" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3119-6" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3119-2" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3186-7" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3186-9" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3022" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3044" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-0" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-4" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-8" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-45" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-1" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-11" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-7" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3066-14" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3160" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-8" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-6" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-2" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-4" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-23" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-3" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-27" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3185-1" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
    <inkscape:perspective id="perspective3072" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d"/>
  <lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R4"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R5"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R6"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R7"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R8"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R9"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R10"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R11"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R12"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R13"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R14"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R15"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R16"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R17"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R18"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R19"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R20"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R21"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R22"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R23"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R24"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R25"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R26"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient><lineargradient y2="0%" x2="100%" y1="0%" x1="0%" id="red_green_R3"><stop stop-color="red" offset="0%"/><stop stop-color="red" offset="94.4444%"/><stop stop-color="green" offset="94.4444%"/><stop stop-color="green" offset="100%"/></lineargradient></defs>



And here is an example of a rectangle referencing them:

Code: Select all

<rect style="" id="R4" width="600" height="80" x="70" y="322.36218" class="wz-rack" inkscape:label="" fill="url(#red_green_R4)" fill-opacity="0.784884" stroke="rgb(0, 0, 0)" stroke-width="0.447214" stroke-miterlimit="1" stroke-opacity="0.784884" stroke-dasharray="none"/>


My regards,
Hallaghan

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG Gradients in Web Application

Postby ~suv » Fri Dec 03, 2010 9:18 pm

s/lineargradient/linearGradient/

(lower/upper case of the element name)

Hallaghan
Posts: 7
Joined: Fri Dec 03, 2010 3:24 am

Re: SVG Gradients in Web Application

Postby Hallaghan » Fri Dec 03, 2010 9:24 pm

I know that the browser has rendered it with lower case but that was not how I defined it.
I'm declaring the linearGradient using jquery's onLoad event, like below:

Code: Select all

$($('rect[class^="wz-rack"]'), svg.root()).each(function() {

            var partialId = $(this).attr('id');
            var gradient = "<linearGradient id='red_green_-*-' x1='0%' y1='0%' x2='100%' y2='0%'>".replace("-*-", partialId);
            gradient += "<stop offset='0%' stop-color='red' />";
            gradient += "<stop offset='94.4444%' stop-color='red' />";
            gradient += "<stop offset='94.4444%' stop-color='green' />";
            gradient += "<stop offset='100%' stop-color='green' />";
            gradient += "</linearGradient>";

            $('#defs4').append(gradient);
            var id = "#red_green_p".replace("p", partialId);


            $(this).removeAttr('style');
            $(this).attr('fill', "url(#red_green_K)".replace("K", partialId));
            $(this).attr('fill-opacity', '0.784884');
            $(this).attr('stroke', 'rgb(0, 0, 0)');
            $(this).attr('stroke-width', '0.447214');
            $(this).attr('stroke-miterlimit', '1');
            $(this).attr('stroke-opacity', '0.784884');
            $(this).attr('stroke-dasharray', 'none');



        });

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG Gradients in Web Application

Postby ~suv » Fri Dec 03, 2010 9:42 pm

Loading a sample file with your gradient definitions in Squiggle (Batik 1.7) - one of Inkscape's reference SVG renderer - fails:
SVG Error:

The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: lineargradient).
Inkscape doesn't recognize any of your gradients either. However, using the same spelling as in the SVG spec, both Squiggle and Inkscape display the gradient fill of the sample <rect> as expected.

Hallaghan wrote:I know that the browser has rendered it with lower case (…)
Checking with browsers locally available, on Mac OS X 10.5.8:
Firefox 3.6, Safari 5.0 and Opera 10.6 all show a gray fill unless the spelling is corrected.

Hallaghan wrote:(…) but that was not how I defined it.
I'm declaring the linearGradient using jquery's onLoad event, like below: (…)
Sorry - can't help with that part (I'm more familiar with Inkscape than with web apps and jquery).

Hallaghan
Posts: 7
Joined: Fri Dec 03, 2010 3:24 am

Re: SVG Gradients in Web Application

Postby Hallaghan » Fri Dec 03, 2010 9:54 pm

How did you get Firefox 3.6 to render it with upper case? If you check this website http://www.w3.org/TR/SVG/images/pservers/lingrad01.svg with Firefox you will see that lineargradient is in lower case... It works there though.

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG Gradients in Web Application

Postby ~suv » Fri Dec 03, 2010 10:07 pm

Hallaghan wrote:How did you get Firefox 3.6 to render it with upper case? If you check this website http://www.w3.org/TR/SVG/images/pservers/lingrad01.svg with Firefox you will see that lineargradient is in lower case... It works there though.

Looking at the source of the linked SVG file from the SVG specification in Firefox's 'View source' window, it is spelled correctly (with mixed cases) as 'linearGradient' :

Code: Select all

    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>

Verified and correctly rendered by Firefox 3.6 on OS X 10.5.8, see this screenshot:
screenshot2-Firefox-3.6.9-osx.png
screenshot2-Firefox-3.6.9-osx.png (192.08 KiB) Viewed 3036 times

~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: SVG Gradients in Web Application

Postby ~suv » Fri Dec 03, 2010 10:14 pm

Attaching my test files…
Attachments
Hallaghan-3.svg
(9.17 KiB) Downloaded 209 times
Hallaghan-3-fixed.svg
(9.17 KiB) Downloaded 228 times

Hallaghan
Posts: 7
Joined: Fri Dec 03, 2010 3:24 am

Re: SVG Gradients in Web Application

Postby Hallaghan » Fri Dec 03, 2010 10:21 pm

Then it has to be a difference between our browsers since mine renders it with lower case...


Return to “SVG / XML Code”