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

Patterns

Expand Messages
  • Brendan
    I m soliciting for some ideas regarding patterns in SVG. The document is basically a thematic diagram created on the fly using .net. Rectangles in a layer need
    Message 1 of 4 , Feb 2, 2007
    • 0 Attachment
      I'm soliciting for some ideas regarding patterns in SVG. The
      document is basically a thematic diagram created on the fly
      using .net. Rectangles in a layer need to be filled with a pattern
      based on the coded lookup value of that particular shape. Examples
      of patterns are hatching, cross-hatching, etc. Secondly -the part
      I'm struggling with- is that the color of the pattern needs to be
      based on a lookup value also. As far a I can tell there's no real
      efficient way to do this without creating multiple patterns with all
      the various fill color options. For example:

      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>

      That code would work just fine if I only wanted a blue checkerboard
      pattern. However, the color and pattern type needs is determined
      based on a lookup value in the database. I can do the patterns
      easily enough since there are only a half-dozen or so options. The
      fill colors on the other hand can range the entire span of RGB.
      Obviously loading all the fill color vairiations per pattern isn't
      an option. Any thouguhts would be apreciated.

      Thx,
      bmc
    • ddailey
      Brendan asks about dynamically changing the content of a pattern. defs
      Message 2 of 4 , Feb 4, 2007
      • 0 Attachment
        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]
      • 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 3 of 4 , Feb 5, 2007
        • 0 Attachment
          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 4 of 4 , Feb 6, 2007
          • 0 Attachment
            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.