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

Re: curvilinear gradients [was: Wavy line symbol in SVG}

Expand Messages
  • Andreas Neumann
    Hi David, Opera so far only implements the d attribute in a glyph, not arbitrary SVG content within a glyph. Thats why SVG fonts work fine when the geometry
    Message 1 of 2 , Feb 11, 2008
    • 0 Attachment
      Hi David,

      Opera so far only implements the "d" attribute in a glyph, not
      arbitrary SVG content within a glyph. Thats why SVG fonts work fine
      when the geometry is defined in the "d" attribute of the glyph
      element, but not additional content as you use it. This only works
      fine in ASV and Batik, haven't tried the latest webkit though.

      Andreas

      --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:
      >
      > Bruce, I like what you're doing with stroke-dasharray here. Using
      script to vary the stroke-dashoffset could make some very nice
      textures.
      >
      > The whole thread, particularly Andreas' use of fonts made me think
      about using textpaths to lay out nonlinear gradients and patterns
      using user-defined fonts and textPaths. So I tried the following
      code, which worked pretty neatly in IE/ASV3, but fell apart in Opera
      9.5 beta (build 9613).
      >
      > I have not done much with glyphs (since I tended to think of them
      as text), but the spec seems to allow not just paths but any graphic
      to be inserted between <glyph> and </glyph>. That should mean (as in
      my example) that we can create gradients of any shape we want -- not
      exactly the full range of nonlinear gradients but at least what
      Claris Draw used to call "shape-gradients".
      >
      > In the example I have added a bit of transparency to the middle
      stop, so one can see the underlying texture of the glyphs. It is
      particularly cool if one adds a <animateTransform dur="3s"
      type="rotate" from="0,.5,.5" to="360,.5,.5" repeatCount="indefinite"
      attributeName="gradientTransform"/>
      > to the linear gradient
      >
      > So is my inability to get it working in Opera something I screwed
      up or a feature not yet implemented?
      >
      >
      > David
      > -------------
      > <svg xmlns="http://www.w3.org/2000/svg"
      > xmlns:xlink="http://www.w3.org/1999/xlink"
      > width="100%" height="100%"
      > viewBox="130 20 300 200">
      > <defs>
      > <font horiz-adv-x="100">
      > <font-face font-family="My Font" units-per-em="100"/>
      > <missing-glyph />
      > <glyph unicode="p" >
      > <path d="M 20 280 L 230 280 230 -160 20 -160z"
      > stroke="none" stroke-width="2" fill="url(#g)" />
      > <linearGradient id="g" gradientTransform="rotate(90 .5 .5)">
      > <stop offset="0" stop-color="#880"/>
      > <stop offset=".25" stop-color="#ff8"/>
      > <stop offset=".5" stop-color="#f0f" stop-opacity=".25"/>
      > <stop offset=".75" stop-color="#ff8"/>
      > <stop offset="1" stop-color="#880"/>
      > </linearGradient>
      > </glyph>
      > </font>
      > </defs>
      > <path id="P0" fill="none" stroke="blue" stroke-width="2" d="M
      100 100 C 300 300 300 -100 500 100"/>
      > <text font-family="My Font" font-size="10" fill="red">
      > <textPath xlink:href="#P0" method="stretch">
      ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
      > </text>
      > <path id="P1" fill="none" stroke="blue" stroke-width="2" d="M
      100 155 C 330 330 320 -70 500 160"/>
      > <text font-family="My Font" font-size="10" fill="red">
      > <textPath xlink:href="#P1" method="stretch">
      ppppppppppppppppppppppppppppppppppppppppppppp </textPath>
      > </text>
      >
      > </svg>
      >
      > ----- Original Message -----
      > On Wednesday, February 06, 2008 at 3:54 PM Bruce wrote: First
      make sure what you copied from Andreas gave is pasted in
      > correctly. I had the same problem until I fixed some of the line
      breaks.
      >
      > Yes, I indeed missed some line breaks.
      >
      >
      >
      >
      > [Non-text portions of this message have been removed]
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.