Loading ...
Sorry, an error occurred while loading the content.
 

color gradient on a line/path

Expand Messages
  • conradroche
    Hi, 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
    Message 1 of 4 , May 19, 2004
      Hi,

      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 blue (the first 10%), the center to be
      black and the end (the last 10%) to be red.

      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">
      <defs>
      <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" />
      </linearGradient>
      </defs>
      <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"/>
      </g>
      </svg>

      cheers
      Conrad
    • zuccaralloo
      Hi Conrad, you need to change two values in your sample: a) gradientUnits= userSpaceOnUse to = objectBoundingBox which is default so you also could leave
      Message 2 of 4 , May 19, 2004
        Hi Conrad,

        you need to change two values in your sample:

        a) gradientUnits="userSpaceOnUse" to ="objectBoundingBox" which is
        default so you also could leave gradientUnits away

        b) on a horizontal (thin) line you probably want to put y2="0%" then
        the gradient goes from west to east. Right now it goes from northwest
        to southeast. So if you change this and then want to draw a vertical
        line with the same kind of gradient you would need to draw a
        horzontal line and rotate it. This way the gradient for that line
        goes from north to south or vice versa. (This for eg applies to the
        two lines in your example going northeast and southeast if you wanted
        that effect. )

        To see how point a) affects fill and stroke of elements you can look
        at a little example at:

        http://www.zuccaralloo.de/devgroup

        userSpace in this case is the box with grid. The colors/patterns of
        the elements will be the same as the background until you switch to
        objectBoundingBox. Ok there is one element I transformed and does
        things different - find out which ;)

        Regards,
        Heiko



        --- In svg-developers@yahoogroups.com, "conradroche"
        <conradroche@y...> wrote:
        > Hi,
        >
        > 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 blue (the first 10%), the center to
        be
        > black and the end (the last 10%) to be red.
        >
        > 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">
        > <defs>
        > <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" />
        > </linearGradient>
        > </defs>
        > <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"/>
        > </g>
        > </svg>
        >
        > cheers
        > Conrad
      • conradroche
        Hi, Thanks Heiko, for the example. My question wasn t very clear ... what I want is a particular pattern for the stroke along the direction of the line. Say,
        Message 3 of 4 , May 20, 2004
          Hi,

          Thanks Heiko, for the example.

          My question wasn't very clear ... what I want is a particular pattern
          for the stroke along the direction of the line. Say, if I have a
          circle with four points A, B, C, D and I draw lines AB, BC, BD and DA
          I want the color to change along the direction in which the line was
          drawn. So, here there are points where two lines meet - but have
          different colors on them.

          One way to draw this could be drawing three separate lines - for each
          of the four lines - each with a particular color. But this solution is
          not very elegant. Also, tomorrow if I want to draw an elliptical curve
          instead of a line, things will get complicated. Also, if I want the
          color to change smoothly, the above approach will not work.

          Is there any way I can specify that the color of the stroke should
          change as the line is being drawn?

          Here's the svg for the approach involving drawing three lines for each
          "line".
          <?xml version="1.0" encoding="UTF-8"?>
          <svg>

          <g id="dtdcircle" style="fill:none; stroke:black;"
          transform="translate(160, 160)">

          <circle fill="none" r="150" cx="0" id="boundary" cy="0"
          stroke="gray" stroke-width="1"/>
          <!--
          A (35.355, 35.355)
          B (-25, 43.301)
          C (-25, -43.301)
          D (0, -50)
          blue (10%) black (80%) red (10%)
          -->
          <g id="line_AB">
          <line x1='106.0660' y1='106.0660' x2='87.9594' y2='108.4498'
          style='fill:none; stroke:blue' stroke-width="2"/>
          <line x1='87.9594' y1='108.4498' x2='-56.8934' y2='127.5200'
          style='fill:none; stroke:black'/>
          <line x1='-56.8934' y1='127.5200' x2='-75.0000' y2='129.9038'
          style='fill:none; stroke:red' stroke-width="2"/>
          </g>
          <g id="line_BC">
          <line x1='-75.0000' y1='129.9038' x2='-75.0000' y2='103.9230'
          style='fill:none; stroke:blue' stroke-width='2'/>
          <line x1='-75.0000' y1='103.9230' x2='-75.0000' y2='-103.9230'
          style='fill:none; stroke:black'/>
          <line x1='-75.0000' y1='-103.9230' x2='-75.0000' y2='-129.9038'
          style='fill:none; stroke:red' stroke-width='2'/>
          </g>

          <g id="line_BD">
          <line x1='-75.0000' y1='129.9038' x2='-67.5000' y2='101.9134'
          style='fill:none; stroke:blue' stroke-width='2'/>
          <line x1='-67.5000' y1='101.9134' x2='-7.5000' y2='-122.0096'
          style='fill:none; stroke:black'/>
          <line x1='-7.5000' y1='-122.0096' x2='0.0000' y2='-150.0000'
          style='fill:none; stroke:red' stroke-width='2'/>
          </g>

          <g id="line_DA">
          <line x1='0.0000' y1='-150.0000' x2='10.6066' y2='-124.3934'
          style='fill:none; stroke:blue' stroke-width='2'/>
          <line x1='10.6066' y1='-124.3934' x2='95.4594' y2='80.4594'
          style='fill:none; stroke:black'/>
          <line x1='95.4594' y1='80.4594' x2='106.0660' y2='106.0660'
          style='fill:none; stroke:red' stroke-width='2'/>
          </g>
          </g>
          </svg>

          --- In svg-developers@yahoogroups.com, "zuccaralloo" <me@z...> wrote:
          > Hi Conrad,
          >
          > you need to change two values in your sample:
          >
          > a) gradientUnits="userSpaceOnUse" to ="objectBoundingBox" which is
          > default so you also could leave gradientUnits away
          >
          > b) on a horizontal (thin) line you probably want to put y2="0%"
          then
          > the gradient goes from west to east. Right now it goes from
          northwest
          > to southeast. So if you change this and then want to draw a
          vertical
          > line with the same kind of gradient you would need to draw a
          > horzontal line and rotate it. This way the gradient for that line
          > goes from north to south or vice versa. (This for eg applies to the
          > two lines in your example going northeast and southeast if you
          wanted
          > that effect. )
          >
          > To see how point a) affects fill and stroke of elements you can
          look
          > at a little example at:
          >
          > http://www.zuccaralloo.de/devgroup
          >
          > userSpace in this case is the box with grid. The colors/patterns of
          > the elements will be the same as the background until you switch to
          > objectBoundingBox. Ok there is one element I transformed and does
          > things different - find out which ;)
          >
          > Regards,
          > Heiko
          >
          >
          >
          > --- In svg-developers@yahoogroups.com, "conradroche"
          > <conradroche@y...> wrote:
          > > Hi,
          > >
          > > 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 blue (the first 10%), the center
          to
          > be
          > > black and the end (the last 10%) to be red.
          > >
          > > 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">
          > > <defs>
          > > <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" />
          > > </linearGradient>
          > > </defs>
          > > <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"/>
          > > </g>
          > > </svg>
          > >
          > > cheers
          > > Conrad
        • zuccaralloo
          Hi Conrad, as far as I know there is no straightforward solution to this problem, since the gradient applies either to the bounding box or the user space on
          Message 4 of 4 , May 23, 2004
            Hi Conrad,

            as far as I know there is no straightforward solution to this
            problem, since the gradient applies either to the bounding box or the
            user space on use and not to the element itself. So right now I don't
            see a way where you can have both: polylines/curves and a 'smooth
            change of colors' from one end to the other. (Did not look up what
            the coming spec says). I guess your approach to have a colored path
            is the way to go. I wrote a sample where paths like this are created
            dynamically and where you can specify the color of each end and the
            length (percentage) of those colored sections. How it works: I
            defined a custom tag called <dyna:path> which uses the same
            attributes as the path element plus the attribute 'keyVals'. Here you
            can specify the color and length of the starting color (a:) and do
            the same for the end (z:). The function drawPaths() searches for
            these tags, generates the code and replaces the custom tag with it.
            You of course could modify the keyVal-attribute e.g. add another
            value to have different stroke-width than the main path. (One further
            step would be to make the keyVals-attribute and the script more
            flexible - attributes instead of static order ...)

            Well, your example could look like this:

            <!--
            A (106.0660 , 106.0660)
            B (-75.0000 , 129.9038)
            C (-75.0000 , -129.9038)
            D (0 , -150)
            blue (10%) black (80%) red (10%)
            -->
            <g transform="translate(160,160)">

            <circle fill="none" r="150" cx="0" id="boundary" cy="0" stroke="gray"
            stroke-width="1"/>

            <dyna:path id="line_AB" d="M106.0660,106.0660 L-75.0000,129.9038"
            style="fill:none;stroke:black;stroke-width:2" keyVals="{a:
            ['blue',10],z:['red',10]}" />
            <dyna:path id="line_BC" d="M-75.0000,129.9038 L-75.0000,-129.9038"
            style="fill:none;stroke:black;stroke-width:2" keyVals="{a:
            ['blue',10],z:['red',10]}" />
            <dyna:path id="line_BC" d="M-75.0000,129.9038 L0,-150"
            style="fill:none;stroke:black;stroke-width:2" keyVals="{a:
            ['blue',10],z:['red',10]}" />
            <dyna:path id="line_BC" d="M0,-150 L106.0660,106.0660"
            style="fill:none;stroke:black;stroke-width:2" keyVals="{a:
            ['blue',10],z:['red',10]}" />

            rest of sample, see:

            http://www.zuccaralloo.de/devgroup


            Hope this is of use for you.

            Regards,
            Heiko


            --- In svg-developers@yahoogroups.com, "conradroche"
            <conradroche@y...> wrote:
            > Hi,
            >
            > Thanks Heiko, for the example.
            >
            > My question wasn't very clear ... what I want is a particular
            pattern
            > for the stroke along the direction of the line. Say, if I have a
            > circle with four points A, B, C, D and I draw lines AB, BC, BD and
            DA
            > I want the color to change along the direction in which the line was
            > drawn. So, here there are points where two lines meet - but have
            > different colors on them.
            >
            > One way to draw this could be drawing three separate lines - for
            each
            > of the four lines - each with a particular color. But this solution
            is
            > not very elegant. Also, tomorrow if I want to draw an elliptical
            curve
            > instead of a line, things will get complicated. Also, if I want the
            > color to change smoothly, the above approach will not work.
            >
            > Is there any way I can specify that the color of the stroke should
            > change as the line is being drawn?
            >
            > Here's the svg for the approach involving drawing three lines for
            each
            > "line".
            > <?xml version="1.0" encoding="UTF-8"?>
            > <svg>
            >
            > <g id="dtdcircle" style="fill:none; stroke:black;"
            > transform="translate(160, 160)">
            >
            > <circle fill="none" r="150" cx="0" id="boundary" cy="0"
            > stroke="gray" stroke-width="1"/>
            > <!--
            > A (35.355, 35.355)
            > B (-25, 43.301)
            > C (-25, -43.301)
            > D (0, -50)
            > blue (10%) black (80%) red (10%)
            > -->
            > <g id="line_AB">
            > <line x1='106.0660' y1='106.0660' x2='87.9594' y2='108.4498'
            > style='fill:none; stroke:blue' stroke-width="2"/>
            > <line x1='87.9594' y1='108.4498' x2='-56.8934' y2='127.5200'
            > style='fill:none; stroke:black'/>
            > <line x1='-56.8934' y1='127.5200' x2='-75.0000' y2='129.9038'
            > style='fill:none; stroke:red' stroke-width="2"/>
            > </g>
            > <g id="line_BC">
            > <line x1='-75.0000' y1='129.9038' x2='-75.0000' y2='103.9230'
            > style='fill:none; stroke:blue' stroke-width='2'/>
            > <line x1='-75.0000' y1='103.9230' x2='-75.0000' y2='-103.9230'
            > style='fill:none; stroke:black'/>
            > <line x1='-75.0000' y1='-103.9230' x2='-75.0000' y2='-129.9038'
            > style='fill:none; stroke:red' stroke-width='2'/>
            > </g>
            >
            > <g id="line_BD">
            > <line x1='-75.0000' y1='129.9038' x2='-67.5000' y2='101.9134'
            > style='fill:none; stroke:blue' stroke-width='2'/>
            > <line x1='-67.5000' y1='101.9134' x2='-7.5000' y2='-122.0096'
            > style='fill:none; stroke:black'/>
            > <line x1='-7.5000' y1='-122.0096' x2='0.0000' y2='-150.0000'
            > style='fill:none; stroke:red' stroke-width='2'/>
            > </g>
            >
            > <g id="line_DA">
            > <line x1='0.0000' y1='-150.0000' x2='10.6066' y2='-124.3934'
            > style='fill:none; stroke:blue' stroke-width='2'/>
            > <line x1='10.6066' y1='-124.3934' x2='95.4594' y2='80.4594'
            > style='fill:none; stroke:black'/>
            > <line x1='95.4594' y1='80.4594' x2='106.0660' y2='106.0660'
            > style='fill:none; stroke:red' stroke-width='2'/>
            > </g>
            > </g>
            > </svg>
            >
            > --- In svg-developers@yahoogroups.com, "zuccaralloo" <me@z...>
            wrote:
            > > Hi Conrad,
            > >
            > > you need to change two values in your sample:
            > >
            > > a) gradientUnits="userSpaceOnUse" to ="objectBoundingBox" which
            is
            > > default so you also could leave gradientUnits away
            > >
            > > b) on a horizontal (thin) line you probably want to put y2="0%"
            > then
            > > the gradient goes from west to east. Right now it goes from
            > northwest
            > > to southeast. So if you change this and then want to draw a
            > vertical
            > > line with the same kind of gradient you would need to draw a
            > > horzontal line and rotate it. This way the gradient for that line
            > > goes from north to south or vice versa. (This for eg applies to
            the
            > > two lines in your example going northeast and southeast if you
            > wanted
            > > that effect. )
            > >
            > > To see how point a) affects fill and stroke of elements you can
            > look
            > > at a little example at:
            > >
            > > http://www.zuccaralloo.de/devgroup
            > >
            > > userSpace in this case is the box with grid. The colors/patterns
            of
            > > the elements will be the same as the background until you switch
            to
            > > objectBoundingBox. Ok there is one element I transformed and does
            > > things different - find out which ;)
            > >
            > > Regards,
            > > Heiko
            > >
            > >
            > >
            > > --- In svg-developers@yahoogroups.com, "conradroche"
            > > <conradroche@y...> wrote:
            > > > Hi,
            > > >
            > > > 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 blue (the first 10%), the center
            > to
            > > be
            > > > black and the end (the last 10%) to be red.
            > > >
            > > > 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">
            > > > <defs>
            > > > <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" />
            > > > </linearGradient>
            > > > </defs>
            > > > <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"/>
            > > > </g>
            > > > </svg>
            > > >
            > > > cheers
            > > > Conrad
          Your message has been successfully submitted and would be delivered to recipients shortly.