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

RE: [svg-developers] Patterns

Expand Messages
  • Carroll, Brendan M.
    I ll give it a try. I guess in this case I d have to pass the color as an argument and on load swap the fill from blue to another color value. Will this work
    Message 1 of 4 , Feb 5, 2007
      I'll give it a try. I guess in this case I'd have to pass the color as
      an argument and on load swap the fill from blue to another color value.
      Will this work if I have multiple shapes referencing the same pattern
      def?



      Brendan Carroll
      Senior Developer
      Baltimore GIS Manager
      GeoDecisions(r)
      Suite A, 4701 Mount Hope Drive
      Baltimore, MD. 21215
      (410) 585-1460 Office
      (443) 610-5650 Cell
      bcarroll@...



      ________________________________

      From: svg-developers@yahoogroups.com
      [mailto:svg-developers@yahoogroups.com] On Behalf Of ddailey
      Sent: Sunday, February 04, 2007 10:53 AM
      To: svg-developers@yahoogroups.com
      Subject: Re: [svg-developers] Patterns



      Brendan asks about dynamically changing the content of a pattern.

      defs>
      <pattern id="checkerPattern" patternUnits="userSpaceOnUse"
      x="0" y="0" width="20" height="20"
      viewBox="0 0 15 15" >
      <rect x="0" y="0" width="10" height="5" fill="blue"/>
      <rect x="5" y="5" width="15" height="5" fill="blue"/>
      </pattern>
      </defs>

      I thought I had an example around somewhere but didn't find it easily...
      Yes, what you wish to do can be done.

      I'd do something like

      changePattern("checkerPattern","newPatternGroup")

      where:
      function changepattern(id,newgroupid){
      var P=document.getElementById(id)
      for (i in P.childnodes){
      P.removeChild(P.items(i))
      }
      //above should clean out the existing stuff in the pattern
      //then add the new stuff
      var G=document.getElementById(newgroupid)
      P.appendChild(G)
      }

      where newPatternGroup would be a group (probably defined in <defs>)
      containing the elements of the new pattern.

      I think that oughta work in browsers that support <pattern>

      hope this helps
      David

      [Non-text portions of this message have been removed]





      [Non-text portions of this message have been removed]
    • Erik Dahlström
      Have you tried using fill= currentColor inside the pattern? Then you should be able to set the color -attribute on the element that references the pattern
      Message 2 of 4 , Feb 6, 2007
        Have you tried using fill="currentColor" inside the pattern? Then you
        should be able to set the 'color'-attribute on the element that references
        the pattern and have it used in the pattern.

        Hope this helps
        /Erik

        On Mon, 05 Feb 2007 18:01:47 +0100, Carroll, Brendan M.
        <bcarroll@...> wrote:

        > I'll give it a try. I guess in this case I'd have to pass the color as
        > an argument and on load swap the fill from blue to another color value.
        > Will this work if I have multiple shapes referencing the same pattern
        > def?
        >
        >
        > Brendan Carroll
        > Senior Developer
        > Baltimore GIS Manager
        > GeoDecisions(r)
        > Suite A, 4701 Mount Hope Drive
        > Baltimore, MD. 21215
        > (410) 585-1460 Office
        > (443) 610-5650 Cell
        > bcarroll@...
        >
        >
        > ________________________________
        >
        > From: svg-developers@yahoogroups.com
        > [mailto:svg-developers@yahoogroups.com] On Behalf Of ddailey
        > Sent: Sunday, February 04, 2007 10:53 AM
        > To: svg-developers@yahoogroups.com
        > Subject: Re: [svg-developers] Patterns
        >
        >
        > Brendan asks about dynamically changing the content of a pattern.
        >
        > defs>
        > <pattern id="checkerPattern" patternUnits="userSpaceOnUse"
        > x="0" y="0" width="20" height="20"
        > viewBox="0 0 15 15" >
        > <rect x="0" y="0" width="10" height="5" fill="blue"/>
        > <rect x="5" y="5" width="15" height="5" fill="blue"/>
        > </pattern>
        > </defs>
        >
        > I thought I had an example around somewhere but didn't find it easily...
        > Yes, what you wish to do can be done.
        >
        > I'd do something like
        >
        > changePattern("checkerPattern","newPatternGroup")
        >
        > where:
        > function changepattern(id,newgroupid){
        > var P=document.getElementById(id)
        > for (i in P.childnodes){
        > P.removeChild(P.items(i))
        > }
        > //above should clean out the existing stuff in the pattern
        > //then add the new stuff
        > var G=document.getElementById(newgroupid)
        > P.appendChild(G)
        > }
        >
        > where newPatternGroup would be a group (probably defined in <defs>)
        > containing the elements of the new pattern.
        >
        > I think that oughta work in browsers that support <pattern>
        >
        > hope this helps
        > David
        >
        > [Non-text portions of this message have been removed]
        >
        >
        >
        >
        > [Non-text portions of this message have been removed]
        >



        --
        Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
      Your message has been successfully submitted and would be delivered to recipients shortly.