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

how to change background color

Expand Messages
  • Bryan Berry
    I am trying to change the background color of these squares, sadly chromium doesn t seem to support the background-color or fill properties Here is my
    Message 1 of 10 , Dec 29, 2009
    • 0 Attachment
      I am trying to change the background color of these squares, sadly chromium
      doesn't seem to support the 'background-color' or 'fill' properties

      Here is my experiment
      http://karma.sugarlabs.org/examples/NumberWords-svg/index.html

      and here is what it should like in the end
      http://karma.sugarlabs.org/examples/NumberWords/index.html


      Can anyone recommend another mechanism to change the colors? tks


      [Non-text portions of this message have been removed]
    • heldermagalhaes
      Hi Bryan ... Yes it does! ;-) ... I ve quickly created a sample based on yours, just for proof-of-concept. SVG snippet follows:
      Message 2 of 10 , Dec 30, 2009
      • 0 Attachment
        Hi Bryan


        > I am trying to change the background color of these squares,
        > sadly chromium doesn't seem to support the 'background-color'
        > or 'fill' properties

        Yes it does! ;-)


        > Here is my experiment
        > http://karma.sugarlabs.org/examples/NumberWords-svg/index.html

        I've quickly created a sample based on yours, just for proof-of-concept. SVG snippet follows:


        <?xml version="1.0" encoding="utf-8"?>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
        <title>Sample</title>
        <rect x="0" y="0" width="100" height="100" stroke="black" fill="yellow"
        onmouseover="evt.target.setAttribute('fill', 'green')"
        onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
        <rect x="100" y="0" width="100" height="100" stroke="black" fill="yellow"
        onmouseover="evt.target.setAttribute('fill', 'green')"
        onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
        <rect x="200" y="0" width="100" height="100" stroke="black" fill="yellow"
        onmouseover="evt.target.setAttribute('fill', 'green')"
        onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
        </svg>


        As far as I could tell, it works well in Firefox 3.5, Chrome 4.0dev, Batik 1.8pre, Opera 10.10 and IE 8.0 + ASV 3.03, all on Windows Vista SP2.


        I also tried using "this" instead of "evt.target" (which I'd intuitively assume it's equivalent) but it broke in ASV and Batik. Did I miss something, i.e., would it be a non-standard (de facto) way of doing it or would it just be implementation issues?


        > Can anyone recommend another mechanism to change the colors? tks

        Well, for simple things like this, you can also try using SMIL [1], which should be available in the next Firefox release within a few months (it's already available in the other stated implementations)! :-) For stuff with complex interaction and for (backwards) compatibility, I'd personally recommend sticking with script for a while. ;-)


        Hope this helps,
        Helder


        [1] http://www.w3.org/TR/SVG/animate.html#Animation.class
      • pawelfritsch
        You should use one rectangle and take to build the crossword.
        Message 3 of 10 , Dec 30, 2009
        • 0 Attachment
          You should use one rectangle and take <use> to build the crossword.

          --- In svg-developers@yahoogroups.com, "heldermagalhaes" <helder.magalhaes@...> wrote:
          >
          > Hi Bryan
          >
          >
          > > I am trying to change the background color of these squares,
          > > sadly chromium doesn't seem to support the 'background-color'
          > > or 'fill' properties
          >
          > Yes it does! ;-)
          >
          >
          > > Here is my experiment
          > > http://karma.sugarlabs.org/examples/NumberWords-svg/index.html
          >
          > I've quickly created a sample based on yours, just for proof-of-concept. SVG snippet follows:
          >
          >
          > <?xml version="1.0" encoding="utf-8"?>
          > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
          > <title>Sample</title>
          > <rect x="0" y="0" width="100" height="100" stroke="black" fill="yellow"
          > onmouseover="evt.target.setAttribute('fill', 'green')"
          > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
          > <rect x="100" y="0" width="100" height="100" stroke="black" fill="yellow"
          > onmouseover="evt.target.setAttribute('fill', 'green')"
          > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
          > <rect x="200" y="0" width="100" height="100" stroke="black" fill="yellow"
          > onmouseover="evt.target.setAttribute('fill', 'green')"
          > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
          > </svg>
          >
          >
          > As far as I could tell, it works well in Firefox 3.5, Chrome 4.0dev, Batik 1.8pre, Opera 10.10 and IE 8.0 + ASV 3.03, all on Windows Vista SP2.
          >
          >
          > I also tried using "this" instead of "evt.target" (which I'd intuitively assume it's equivalent) but it broke in ASV and Batik. Did I miss something, i.e., would it be a non-standard (de facto) way of doing it or would it just be implementation issues?
          >
          >
          > > Can anyone recommend another mechanism to change the colors? tks
          >
          > Well, for simple things like this, you can also try using SMIL [1], which should be available in the next Firefox release within a few months (it's already available in the other stated implementations)! :-) For stuff with complex interaction and for (backwards) compatibility, I'd personally recommend sticking with script for a while. ;-)
          >
          >
          > Hope this helps,
          > Helder
          >
          >
          > [1] http://www.w3.org/TR/SVG/animate.html#Animation.class
          >
        • Bryan Berry
          tks Helder! I will try it out and let u know I would like to use smil but afaik it isn t on slated to be part of webkit any time soon. Do know if smil support
          Message 4 of 10 , Dec 30, 2009
          • 0 Attachment
            tks Helder! I will try it out and let u know

            I would like to use smil but afaik it isn't on slated to be part of webkit
            any time soon. Do know if smil support is on the webkit roadmap?

            On Wed, Dec 30, 2009 at 4:48 PM, heldermagalhaes <helder.magalhaes@...
            > wrote:

            >
            >
            > Hi Bryan
            >
            >
            > > I am trying to change the background color of these squares,
            > > sadly chromium doesn't seem to support the 'background-color'
            > > or 'fill' properties
            >
            > Yes it does! ;-)
            >
            >
            > > Here is my experiment
            > > http://karma.sugarlabs.org/examples/NumberWords-svg/index.html
            >
            > I've quickly created a sample based on yours, just for proof-of-concept.
            > SVG snippet follows:
            >
            > <?xml version="1.0" encoding="utf-8"?>
            > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
            > <title>Sample</title>
            > <rect x="0" y="0" width="100" height="100" stroke="black" fill="yellow"
            > onmouseover="evt.target.setAttribute('fill', 'green')"
            > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
            > <rect x="100" y="0" width="100" height="100" stroke="black" fill="yellow"
            > onmouseover="evt.target.setAttribute('fill', 'green')"
            > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
            > <rect x="200" y="0" width="100" height="100" stroke="black" fill="yellow"
            > onmouseover="evt.target.setAttribute('fill', 'green')"
            > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
            > </svg>
            >
            > As far as I could tell, it works well in Firefox 3.5, Chrome 4.0dev, Batik
            > 1.8pre, Opera 10.10 and IE 8.0 + ASV 3.03, all on Windows Vista SP2.
            >
            > I also tried using "this" instead of "evt.target" (which I'd intuitively
            > assume it's equivalent) but it broke in ASV and Batik. Did I miss something,
            > i.e., would it be a non-standard (de facto) way of doing it or would it just
            > be implementation issues?
            >
            >
            > > Can anyone recommend another mechanism to change the colors? tks
            >
            > Well, for simple things like this, you can also try using SMIL [1], which
            > should be available in the next Firefox release within a few months (it's
            > already available in the other stated implementations)! :-) For stuff with
            > complex interaction and for (backwards) compatibility, I'd personally
            > recommend sticking with script for a while. ;-)
            >
            > Hope this helps,
            > Helder
            >
            > [1] http://www.w3.org/TR/SVG/animate.html#Animation.class
            >
            >
            >


            [Non-text portions of this message have been removed]
          • Bryan Berry
            pawel, could you be more specific how I could use ? I am not so familiar w/ it ... [Non-text portions of this message have been removed]
            Message 5 of 10 , Dec 30, 2009
            • 0 Attachment
              pawel,

              could you be more specific how I could use <use> ? I am not so familiar w/
              it

              On Wed, Dec 30, 2009 at 6:17 PM, pawelfritsch <pawelf@...> wrote:

              >
              >
              > You should use one rectangle and take <use> to build the crossword.
              >
              >
              > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
              > "heldermagalhaes" <helder.magalhaes@...> wrote:
              > >
              > > Hi Bryan
              > >
              > >
              > > > I am trying to change the background color of these squares,
              > > > sadly chromium doesn't seem to support the 'background-color'
              > > > or 'fill' properties
              > >
              > > Yes it does! ;-)
              > >
              > >
              > > > Here is my experiment
              > > > http://karma.sugarlabs.org/examples/NumberWords-svg/index.html
              > >
              > > I've quickly created a sample based on yours, just for proof-of-concept.
              > SVG snippet follows:
              > >
              > >
              > > <?xml version="1.0" encoding="utf-8"?>
              > > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
              > > <title>Sample</title>
              > > <rect x="0" y="0" width="100" height="100" stroke="black" fill="yellow"
              > > onmouseover="evt.target.setAttribute('fill', 'green')"
              > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
              > > <rect x="100" y="0" width="100" height="100" stroke="black" fill="yellow"
              > > onmouseover="evt.target.setAttribute('fill', 'green')"
              > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
              > > <rect x="200" y="0" width="100" height="100" stroke="black" fill="yellow"
              > > onmouseover="evt.target.setAttribute('fill', 'green')"
              > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
              > > </svg>
              > >
              > >
              > > As far as I could tell, it works well in Firefox 3.5, Chrome 4.0dev,
              > Batik 1.8pre, Opera 10.10 and IE 8.0 + ASV 3.03, all on Windows Vista SP2.
              > >
              > >
              > > I also tried using "this" instead of "evt.target" (which I'd intuitively
              > assume it's equivalent) but it broke in ASV and Batik. Did I miss something,
              > i.e., would it be a non-standard (de facto) way of doing it or would it just
              > be implementation issues?
              > >
              > >
              > > > Can anyone recommend another mechanism to change the colors? tks
              > >
              > > Well, for simple things like this, you can also try using SMIL [1], which
              > should be available in the next Firefox release within a few months (it's
              > already available in the other stated implementations)! :-) For stuff with
              > complex interaction and for (backwards) compatibility, I'd personally
              > recommend sticking with script for a while. ;-)
              > >
              > >
              > > Hope this helps,
              > > Helder
              > >
              > >
              > > [1] http://www.w3.org/TR/SVG/animate.html#Animation.class
              > >
              >
              >
              >


              [Non-text portions of this message have been removed]
            • pawelfritsch
              Hi Bryan, look at this example:
              Message 6 of 10 , Dec 30, 2009
              • 0 Attachment
                Hi Bryan,

                look at this example:

                <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
                <title>Sample</title>
                <defs>
                <rect id="base" x="0" y="0" width="10" height="10" stroke="black" fill="yellow"/>
                </defs>
                <use xlink:href="#base" x="0" y="0"/>
                <use xlink:href="#base" x="11" y="0"/>
                <use xlink:href="#base" x="21" y="0"/>
                <use xlink:href="#base" x="31" y="0"/>
                <use xlink:href="#base" x="11" y="11"/>
                <use xlink:href="#base" x="21" y="21"/>
                <use xlink:href="#base" x="31" y="31"/>
                </svg>


                The <defs> Region is your workbench. This wouldn't render.
                Use your rectangle how often you like.

                --- In svg-developers@yahoogroups.com, Bryan Berry <bryan@...> wrote:
                >
                > pawel,
                >
                > could you be more specific how I could use <use> ? I am not so familiar w/
                > it
                >
                > On Wed, Dec 30, 2009 at 6:17 PM, pawelfritsch <pawelf@...> wrote:
                >
                > >
                > >
                > > You should use one rectangle and take <use> to build the crossword.
                > >
                > >
                > > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
                > > "heldermagalhaes" <helder.magalhaes@> wrote:
                > > >
                > > > Hi Bryan
                > > >
                > > >
                > > > > I am trying to change the background color of these squares,
                > > > > sadly chromium doesn't seem to support the 'background-color'
                > > > > or 'fill' properties
                > > >
                > > > Yes it does! ;-)
                > > >
                > > >
                > > > > Here is my experiment
                > > > > http://karma.sugarlabs.org/examples/NumberWords-svg/index.html
                > > >
                > > > I've quickly created a sample based on yours, just for proof-of-concept.
                > > SVG snippet follows:
                > > >
                > > >
                > > > <?xml version="1.0" encoding="utf-8"?>
                > > > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
                > > > <title>Sample</title>
                > > > <rect x="0" y="0" width="100" height="100" stroke="black" fill="yellow"
                > > > onmouseover="evt.target.setAttribute('fill', 'green')"
                > > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
                > > > <rect x="100" y="0" width="100" height="100" stroke="black" fill="yellow"
                > > > onmouseover="evt.target.setAttribute('fill', 'green')"
                > > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
                > > > <rect x="200" y="0" width="100" height="100" stroke="black" fill="yellow"
                > > > onmouseover="evt.target.setAttribute('fill', 'green')"
                > > > onmouseout="evt.target.setAttribute('fill', 'yellow')"/>
                > > > </svg>
                > > >
                > > >
                > > > As far as I could tell, it works well in Firefox 3.5, Chrome 4.0dev,
                > > Batik 1.8pre, Opera 10.10 and IE 8.0 + ASV 3.03, all on Windows Vista SP2.
                > > >
                > > >
                > > > I also tried using "this" instead of "evt.target" (which I'd intuitively
                > > assume it's equivalent) but it broke in ASV and Batik. Did I miss something,
                > > i.e., would it be a non-standard (de facto) way of doing it or would it just
                > > be implementation issues?
                > > >
                > > >
                > > > > Can anyone recommend another mechanism to change the colors? tks
                > > >
                > > > Well, for simple things like this, you can also try using SMIL [1], which
                > > should be available in the next Firefox release within a few months (it's
                > > already available in the other stated implementations)! :-) For stuff with
                > > complex interaction and for (backwards) compatibility, I'd personally
                > > recommend sticking with script for a while. ;-)
                > > >
                > > >
                > > > Hope this helps,
                > > > Helder
                > > >
                > > >
                > > > [1] http://www.w3.org/TR/SVG/animate.html#Animation.class
                > > >
                > >
                > >
                > >
                >
                >
                > [Non-text portions of this message have been removed]
                >
              • David Leunen
                ... afaik safari supports smil since version 4. acid3 contains smil tests, so any engine that passes it supports smil (a least partly). [Non-text portions of
                Message 7 of 10 , Dec 31, 2009
                • 0 Attachment
                  > I would like to use smil but afaik it isn't on slated to be part of webkit
                  > any time soon. Do know if smil support is on the webkit roadmap?
                  >

                  afaik safari supports smil since version 4.
                  acid3 contains smil tests, so any engine that passes it supports smil (a
                  least partly).


                  [Non-text portions of this message have been removed]
                • cremnosedum
                  Hi, No you can t use x and y attributes in use elements. You ve got to change their possitions with transform attributes. You don t need one for the first
                  Message 8 of 10 , Dec 31, 2009
                  • 0 Attachment
                    Hi,

                    No you can't use x and y attributes in use elements. You've got to change their possitions with transform attributes. You don't need one for the first element. For the second you can use transfom="translate(11,0)" or transform="matrix(1,0,0,1,11,0)". You can also economise on code by grouping use elements with g elements and then referencing the g emelements with use elements. For example:

                    <use xlink:href="#base" x="0" y="0"/>
                    <use xlink:href="#base" x="10" y="0"/>
                    <use xlink:href="#base" x="20" y="0"/>
                    <use xlink:href="#base" x="30" y="0"/>

                    Can be replaced with:

                    <g id="myg">
                    <use xlink:href="#base"/>
                    <use xlink:href="#base" transform="translate(10,0)"/>
                    </g>
                    <use xlink:href="#myg" transform="translate(20,0)"/>

                    You can have multiple levels of g and use and produce something very complicated from relatively few elements. Note I had to change your numbers a bit because the first column was wider than the rest.

                    Another way to fill an area with a regular patern is to use a patern element, a bit fidly and not so widely or consistently implimented but it could save you a lot of code.

                    Richard Pearman http://www.pixelpalaces.com/
                    The next stage in the evolution of web comics: http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
                    Read my Helium articles: http://www.helium.com/users/212199
                    South Alberta Cactus and succulent society: http://www.facebook.com/group.php?gid=20360241008

                    --- In svg-developers@yahoogroups.com, "pawelfritsch" <pawelf@...> wrote:
                    >
                    > Hi Bryan,
                    >
                    > look at this example:
                    >
                    > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                    > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                    > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                    > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
                    > <title>Sample</title>
                    > <defs>
                    > <rect id="base" x="0" y="0" width="10" height="10" stroke="black" fill="yellow"/>
                    > </defs>
                    > <use xlink:href="#base" x="0" y="0"/>
                    > <use xlink:href="#base" x="11" y="0"/>
                    > <use xlink:href="#base" x="21" y="0"/>
                    > <use xlink:href="#base" x="31" y="0"/>
                    > <use xlink:href="#base" x="11" y="11"/>
                    > <use xlink:href="#base" x="21" y="21"/>
                    > <use xlink:href="#base" x="31" y="31"/>
                    > </svg>
                  • pawelfritsch
                    Yes you can The use element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a
                    Message 9 of 10 , Jan 1, 2010
                    • 0 Attachment
                      Yes you can

                      "The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system."
                      http://www.w3.org/TR/SVG11/struct.html#UseElement

                      My example works and is valid. Webkit have some problems with it.



                      --- In svg-developers@yahoogroups.com, "cremnosedum" <richard@...> wrote:
                      >
                      > Hi,
                      >
                      > No you can't use x and y attributes in use elements. You've got to change their possitions with transform attributes. You don't need one for the first element. For the second you can use transfom="translate(11,0)" or transform="matrix(1,0,0,1,11,0)". You can also economise on code by grouping use elements with g elements and then referencing the g emelements with use elements. For example:
                      >
                      > <use xlink:href="#base" x="0" y="0"/>
                      > <use xlink:href="#base" x="10" y="0"/>
                      > <use xlink:href="#base" x="20" y="0"/>
                      > <use xlink:href="#base" x="30" y="0"/>
                      >
                      > Can be replaced with:
                      >
                      > <g id="myg">
                      > <use xlink:href="#base"/>
                      > <use xlink:href="#base" transform="translate(10,0)"/>
                      > </g>
                      > <use xlink:href="#myg" transform="translate(20,0)"/>
                      >
                      > You can have multiple levels of g and use and produce something very complicated from relatively few elements. Note I had to change your numbers a bit because the first column was wider than the rest.
                      >
                      > Another way to fill an area with a regular patern is to use a patern element, a bit fidly and not so widely or consistently implimented but it could save you a lot of code.
                      >
                      > Richard Pearman http://www.pixelpalaces.com/
                      > The next stage in the evolution of web comics: http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
                      > Read my Helium articles: http://www.helium.com/users/212199
                      > South Alberta Cactus and succulent society: http://www.facebook.com/group.php?gid=20360241008
                      >
                      > --- In svg-developers@yahoogroups.com, "pawelfritsch" <pawelf@> wrote:
                      > >
                      > > Hi Bryan,
                      > >
                      > > look at this example:
                      > >
                      > > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                      > > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                      > > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
                      > > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
                      > > <title>Sample</title>
                      > > <defs>
                      > > <rect id="base" x="0" y="0" width="10" height="10" stroke="black" fill="yellow"/>
                      > > </defs>
                      > > <use xlink:href="#base" x="0" y="0"/>
                      > > <use xlink:href="#base" x="11" y="0"/>
                      > > <use xlink:href="#base" x="21" y="0"/>
                      > > <use xlink:href="#base" x="31" y="0"/>
                      > > <use xlink:href="#base" x="11" y="11"/>
                      > > <use xlink:href="#base" x="21" y="21"/>
                      > > <use xlink:href="#base" x="31" y="31"/>
                      > > </svg>
                      >
                    • cremnosedum
                      Hi, I must have fallen through into a parallel universe again because I m sure x and y never used to work in use. Do they override the referenced object s x
                      Message 10 of 10 , Jan 4, 2010
                      • 0 Attachment
                        Hi,

                        I must have fallen through into a parallel universe again because I'm sure x and y never used to work in use. Do they override the referenced object's x and y attributes or add to them? Are they overriden by the x and y attribues of the referenced object (the way css properties are)? What happens if there's a transform (e.g. does x="1" have the effect of x="2" if there's a transform="scale(2)" attribute)? What if the use is in a g element with a transform?

                        Richard Pearman http://www.pixelpalaces.com/
                        The next stage in the evolution of web comics: http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
                        Read my Helium articles: http://www.helium.com/users/212199
                        South Alberta Cactus and succulent society: http://www.facebook.com/group.php?gid=20360241008

                        --- In svg-developers@yahoogroups.com, "pawelfritsch" <pawelf@...> wrote:
                        >
                        > Yes you can
                        >
                        > "The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system."
                        > http://www.w3.org/TR/SVG11/struct.html#UseElement
                        >
                        > My example works and is valid. Webkit have some problems with it.
                      Your message has been successfully submitted and would be delivered to recipients shortly.