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

Negative dx and gradients with color names in four browsers

Expand Messages
  • Arjen
    D3.js generated to code below. There is not a single browser that displays this code 100% correct. Two questions rise: 1. Is a negative dx allowed? Firefox 13
    Message 1 of 9 , Jun 26, 2012
      D3.js generated to code below.

      There is not a single browser that displays this code 100% correct.

      Two questions rise:
      1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 /IE9 apply it.
      2. Are color names allowed in a gradient? Firefox 13 does apply it, the other three display black bars.

      Do I have to change the code or are the browsers buggy?

      Arjen

      <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" height="174" width="1278">
      <defs>
      <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientPositive">
      <stop stop-opacity="1" stop-color="dodgerblue" offset="0%"></stop>
      <stop stop-opacity="1" stop-color="steelblue" offset="100%"></stop>
      </linearGradient>
      </defs>
      <defs>
      <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientNegative">
      <stop stop-opacity="1" stop-color="crimson" offset="0%"></stop>
      <stop stop-opacity="1" stop-color="firebrick" offset="100%"></stop>
      </linearGradient>
      </defs>
      <g transform="translate(95,18)">
      <text text-anchor="middle" dy="-3" x="-40">-40</text>
      <text text-anchor="middle" dy="-3" x="54">-35</text>
      <text text-anchor="middle" dy="-3" x="148">-30</text>
      <text text-anchor="middle" dy="-3" x="242">-25</text>
      <text text-anchor="middle" dy="-3" x="336">-20</text>
      <text text-anchor="middle" dy="-3" x="430">-15</text>
      <text text-anchor="middle" dy="-3" x="524">-10</text>
      <text text-anchor="middle" dy="-3" x="618">-5</text>
      <text text-anchor="middle" dy="-3" x="712">0</text>
      <text text-anchor="middle" dy="-3" x="806">5</text>
      <text text-anchor="middle" dy="-3" x="900">10</text>
      <text text-anchor="middle" dy="-3" x="994">15</text>
      <text text-anchor="middle" dy="-3" x="1088">20</text>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="-40" x1="-40"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="54" x1="54"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="148" x1="148"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="242" x1="242"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="336" x1="336"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="430" x1="430"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="524" x1="524"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="618" x1="618"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="712" x1="712"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="806" x1="806"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="900" x1="900"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="994" x1="994"></line>
      <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="1088" x1="1088"></line>
      </g>
      <g transform="translate(95,24)">
      <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="12.5" x="712">essential5</text>
      <text text-anchor="start" dy=".35em" dx=".3em" fill="black" stroke="none" y="37.5" x="712">Lichaam</text>
      <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="62.5" x="712">Status</text>
      <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="87.5" x="712">Identiteit</text>
      <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="112.5" x="712">Samenwerken</text>
      <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="137.5" x="712">Kennis</text>
      </g>
      <g transform="translate(95,24)">
      <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="0"></rect>
      <rect fill="url(#gradientNegative" stroke="white" width="695.6" x="16.400000000000006" height="25" y="25"></rect>
      <rect fill="url(#gradientPositive" stroke="white" width="319.5999999999999" x="712" height="25" y="50"></rect>
      <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="75"></rect>
      <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="100"></rect>
      <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="125"></rect>
      <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="12.5" x="712">0</text>
      <text stroke="none" fill="black" text-anchor="end" dy=".35em" dx="-.3em" y="37.5" x="16.400000000000006">-37</text>
      <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="62.5" x="1031.6">17</text>
      <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="87.5" x="712">0</text>
      <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="112.5" x="712">0</text>
      <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="137.5" x="712">0</text>
      <line style="stroke: rgb(0, 0, 0);" y2="156" y1="-6" x2="712" x1="712"></line>
      </g>
      </svg>
    • Arjen
      No browser displays to code below 100% correct. This leads to 2 questions: 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 and IE 9
      Message 2 of 9 , Jun 26, 2012
        No browser displays to code below 100% correct.

        This leads to 2 questions:
        1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 and IE 9 apply it.
        2. Is a color name allowed in a gradient? Firefox 13 displays it correct. Opera, Chrome and IE display a black bar.

        Do I have to change the code or are the browser buggy?

        Arjen

        This code is generated by d3.js

        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" height="174" width="1278">
        <defs>
        <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientPositive">
        <stop stop-opacity="1" stop-color="dodgerblue" offset="0%"></stop>
        <stop stop-opacity="1" stop-color="steelblue" offset="100%"></stop>
        </linearGradient>
        </defs>
        <defs>
        <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientNegative">
        <stop stop-opacity="1" stop-color="crimson" offset="0%"></stop>
        <stop stop-opacity="1" stop-color="firebrick" offset="100%"></stop>
        </linearGradient>
        </defs>
        <g transform="translate(95,18)">
        <text text-anchor="middle" dy="-3" x="-40">-40</text>
        <text text-anchor="middle" dy="-3" x="54">-35</text>
        <text text-anchor="middle" dy="-3" x="148">-30</text>
        <text text-anchor="middle" dy="-3" x="242">-25</text>
        <text text-anchor="middle" dy="-3" x="336">-20</text>
        <text text-anchor="middle" dy="-3" x="430">-15</text>
        <text text-anchor="middle" dy="-3" x="524">-10</text>
        <text text-anchor="middle" dy="-3" x="618">-5</text>
        <text text-anchor="middle" dy="-3" x="712">0</text>
        <text text-anchor="middle" dy="-3" x="806">5</text>
        <text text-anchor="middle" dy="-3" x="900">10</text>
        <text text-anchor="middle" dy="-3" x="994">15</text>
        <text text-anchor="middle" dy="-3" x="1088">20</text>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="-40" x1="-40"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="54" x1="54"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="148" x1="148"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="242" x1="242"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="336" x1="336"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="430" x1="430"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="524" x1="524"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="618" x1="618"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="712" x1="712"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="806" x1="806"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="900" x1="900"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="994" x1="994"></line>
        <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="1088" x1="1088"></line>
        </g>
        <g transform="translate(95,24)">
        <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="12.5" x="712">essential5</text>
        <text text-anchor="start" dy=".35em" dx=".3em" fill="black" stroke="none" y="37.5" x="712">Lichaam</text>
        <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="62.5" x="712">Status</text>
        <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="87.5" x="712">Identiteit</text>
        <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="112.5" x="712">Samenwerken</text>
        <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="137.5" x="712">Kennis</text>
        </g>
        <g transform="translate(95,24)">
        <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="0"></rect>
        <rect fill="url(#gradientNegative" stroke="white" width="695.6" x="16.400000000000006" height="25" y="25"></rect>
        <rect fill="url(#gradientPositive" stroke="white" width="319.5999999999999" x="712" height="25" y="50"></rect>
        <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="75"></rect>
        <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="100"></rect>
        <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="125"></rect>
        <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="12.5" x="712">0</text>
        <text stroke="none" fill="black" text-anchor="end" dy=".35em" dx="-.3em" y="37.5" x="16.400000000000006">-37</text>
        <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="62.5" x="1031.6">17</text>
        <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="87.5" x="712">0</text>
        <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="112.5" x="712">0</text>
        <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="137.5" x="712">0</text>
        <line style="stroke: rgb(0, 0, 0);" y2="156" y1="-6" x2="712" x1="712"></line>
        </g>
        </svg>
      • Erik Dahlstrom
        ... Negative dx? If you mean the values in the [x1,y1,x2,y2] attributes then yes they may be negative, that s valid. (x1,y1) defines where the color stop at
        Message 3 of 9 , Jun 26, 2012
          On Tue, 26 Jun 2012 12:12:28 +0200, Arjen <arjenmeijernl@...> wrote:

          > No browser displays to code below 100% correct.
          >
          > This leads to 2 questions:
          > 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19
          > and IE 9 apply it.

          Negative dx? If you mean the values in the [x1,y1,x2,y2] attributes then
          yes they may be negative, that's valid. (x1,y1) defines where the color
          stop at offset 0 is, and (x2,y2) defines where the color stop at offset 1
          (or 100%) is.

          > 2. Is a color name allowed in a gradient? Firefox 13 displays it
          > correct. Opera, Chrome and IE display a black bar.

          Odd, so Firefox renders invalid fill attributes? Sounds like a bug to me.

          > Do I have to change the code or are the browser buggy?

          Here is the buggy part in your markup:

          fill="url(#gradientPositive"

          See the missing closing parenthesis? Both gradients worked just fine after
          adding that.

          Hope this helps
          --
          Erik Dahlstrom, Core Technology Developer, Opera Software
          Co-Chair, W3C SVG Working Group
          Personal blog: http://my.opera.com/macdev_ed
        • Arjen
          ... the problem is dx= -.3em in the line -37
          Message 4 of 9 , Jun 26, 2012
            --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
            > > 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 and IE 9 apply it.

            the problem is dx="-.3em" in the line
            <text stroke="none" fill="black" text-anchor="end" dy=".35em" dx="-.3em" y="37.5" x="16.400000000000006">-37</text>

            > > 2. Is a color name allowed in a gradient? Firefox 13 displays it
            > > correct. Opera, Chrome and IE display a black bar.

            > Here is the buggy part in your markup:
            >
            > fill="url(#gradientPositive"

            Sorry. The document passed http://validator.w3.org/check successfully, which is so to see no guaranty the code is correct.

            Thanks for you remarks,

            Arjen
          • Jason Barnabas
            For those who don t know, dx and dy are adjustments from the last print location. 1. Yes you can use negative values in dx and dy. Doing so moves a
            Message 5 of 9 , Jun 26, 2012
              For those who don't know, dx and dy are adjustments from the last print
              location.

              1. Yes you can use negative values in dx and dy. Doing so moves a <tspan>
              element to the left or up but does nothing with <text> elements in Chrome.

              2. I've never heard of the color names used and as you mentioned they did not
              work in Chrome, which is my primary browser. FireFox 12 showed solid red and
              solid blue bars. If I wanted gradients to be visible by everyone, I'd convert to
              hex or rgb. If you don't know the component colors you can do a screen shot and
              load it into most graphics apps and use the ol' dropper to find out.

              As has been mentioned, SVG is still under development and the way the standard
              is interpreted is somewhat different for some browsers than
              others. ____________________________________________________________


              I must be travelling,
              Jason


              tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
              ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+
              kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy



              > From: Arjen <arjenmeijernl@...>
              >
              > No browser displays to code below 100% correct.
              >
              > This leads to 2 questions:
              > 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 and IE
              >9 apply it.
              > 2. Is a color name allowed in a gradient? Firefox 13 displays it correct.
              >Opera, Chrome and IE display a black bar.
              >
              >
              > Do I have to change the code or are the browser buggy?
              >
              > Arjen
            • Erik Dahlstrom
              ... I don t know of any validators for svg that check the attribute values. Your content is markupwise valid (ignoring all the attribute values), but the
              Message 6 of 9 , Jun 27, 2012
                On Tue, 26 Jun 2012 16:06:36 +0200, Arjen <arjenmeijernl@...> wrote:

                >
                >
                >
                > --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
                >> > 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome
                >> 19 and IE 9 apply it.
                >
                > the problem is dx="-.3em" in the line
                > <text stroke="none" fill="black" text-anchor="end" dy=".35em" dx="-.3em"
                > y="37.5" x="16.400000000000006">-37</text>
                >
                >> > 2. Is a color name allowed in a gradient? Firefox 13 displays it
                >> > correct. Opera, Chrome and IE display a black bar.
                >
                >> Here is the buggy part in your markup:
                >>
                >> fill="url(#gradientPositive"
                >
                > Sorry. The document passed http://validator.w3.org/check successfully,
                > which is so to see no guaranty the code is correct.

                I don't know of any validators for svg that check the attribute values.
                Your content is markupwise valid (ignoring all the attribute values), but
                the correct rendering for an invalid fill attribute is black (same as not
                specifying fill at all).

                Browsers will often be helpful and put some warnings in the error console
                for you if the content is invalid in some way. For example if you run the
                svg that you posted in Opera, this is an example of what you would see in
                the console:

                Failed attribute on rect element: fill="url(#gradientPositive".


                Cheers
                --
                Erik Dahlstrom, Core Technology Developer, Opera Software
                Co-Chair, W3C SVG Working Group
                Personal blog: http://my.opera.com/macdev_ed
              • Erik Dahlstrom
                ... Yes, color names are allowed in gradients. All browsers support that. See e.g http://apike.ca/prog_svg_gradients.html. -- Erik Dahlstrom, Core Technology
                Message 7 of 9 , Jun 27, 2012
                  On Tue, 26 Jun 2012 16:06:36 +0200, Arjen <arjenmeijernl@...> wrote:

                  > 2. Is a color name allowed in a gradient? Firefox 13 displays it
                  > correct. Opera, Chrome and IE display a black bar.

                  Yes, color names are allowed in gradients. All browsers support that. See
                  e.g http://apike.ca/prog_svg_gradients.html.

                  --
                  Erik Dahlstrom, Core Technology Developer, Opera Software
                  Co-Chair, W3C SVG Working Group
                  Personal blog: http://my.opera.com/macdev_ed
                • Arjen
                  Not rendering a negative dx in Firefox 13 and Opera 12 is a bug of the browser?
                  Message 8 of 9 , Jun 27, 2012
                    Not rendering a negative dx in Firefox 13 and Opera 12 is a bug of the browser?
                  • Robert Longson
                    ... Eric, Missing closing parentheses do not cause things to not be parsed; they re inferred. This is the rule for CSS and we use it for attributes so as not
                    Message 9 of 9 , Jun 27, 2012
                      > > 2. Is a color name allowed in a gradient? Firefox 13 displays it
                      > > correct. Opera, Chrome and IE display a black bar.
                      >
                      > Odd, so Firefox renders invalid fill attributes? Sounds like a bug to me.
                      >

                      Eric,

                      Missing closing parentheses do not cause things to not be parsed; they're inferred. This is the rule for CSS and we use it for attributes so as not to have additional CSS/attribute parsing differences.

                      See
                      https://bugzilla.mozilla.org/show_bug.cgi?id=598618#c4
                      http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-September/028702.html
                      http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-September/028703.html

                      Robert.
                    Your message has been successfully submitted and would be delivered to recipients shortly.