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,