W3C home > Mailing lists > Public > www-svg@w3.org > May 2004

color gradient on a line/path

From: Roche, Conrad (Cognizant) <Conrad.Roche@cognizant.com>
Date: Wed, 19 May 2004 14:13:06 -0700
Message-ID: <5B1E4655A9E7D611962700508BD8A99C4C4736@ctsusphx.cts.com>
To: <www-svg@w3.org>


Is it possible to have the color of the line change from one end to
the other?

I tried using linearGradient, but the output wasn't as expected! I
want one end of the line to be green (the first 10%), the center to be
black and the end (the last 10%) to be blue.

The lines connect two arbitrary points on the circle (the svg is
generated using java).

Here's a sample output -
<?xml version="1.0" encoding="UTF-8"?>
<svg width="80" height="80">
    <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%"
y2="100%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#0F0" />
      <stop offset="20%" stop-color="#000" />
      <stop offset="80%" stop-color="#000" />
      <stop offset="80%" stop-color="#00F" />
  <g id="dtdcircle" style="fill:none; stroke:black;"
transform="translate(40, 40)">
    <circle fill="none" r="20" cx="0" id="boundary" cy="0"
            stroke="blue" stroke-width="1"/>
    <line y2="-20.0" style="fill:none; stroke:url(#MyGradient);"
            x1="-20.0" x2="0" y1="0"/>
    <line y2="20.0" style="fill:none; stroke:url(#MyGradient);"
            x1="-20.0" x2="0" y1="0"/>
    <line y2="0.0" style="fill:none; stroke:url(#MyGradient);"
            x1="-20.0" x2="20.0" y1="0"/>


This e-mail and any files transmitted with it are for the sole use of the intended recipient(s
and may contain confidential and privileged information.If you are not the intended recipient,
please contact the sender by reply e-mail and destroy all copies of the original message.
Any unauthorised review, use, disclosure, dissemination, forwarding, printing or copying
of this email or any action taken in reliance on this e-mail is strictly prohibited and may be

 Visit us at http://www.cognizant.com
Received on Wednesday, 19 May 2004 18:27:17 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:46:58 UTC