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

Tough on browsers

Expand Messages
  • ddailey
    The following document (example1) is a candidate for an acid test perhaps? It has an animated stop (using straight animation, rather than animateColor, on
    Message 1 of 1 , Oct 7, 2010
    View Source
    • 0 Attachment
      The following document (example1) is a candidate for an acid test perhaps? It has an animated stop (using straight animation, rather than animateColor, on named colors) applied to a mask applied to an <image>. (I'm assuming this is legal by the spec since it works almost every where else, including in feDisplacement which is usually the last thing that a young SVG browser seems to get right)

      Status:
      Opera -- mucks up the lower part of the reflected gradient (I suspect this is a known bug, since I've seen it before in other examples)
      FF4b -- doesn't animate the stop within the gradient
      Chrome -- doesn't interpolate across color ranges of values in the gradient
      Safari -- doesn't reflect the gradient and doesn't interpolate between color values
      ASV -- seems to be correct, but slow

      Example 2 shows that Chrome and Safari understand how to interpolate smootlhly between black and white, apparently just not when it involves a gradient stop. Example 2, however points out an apparent bug in FF4b6 which seems reluctant to let the SMIL override the gradient fill declared in the tag.

      Example 1
      --------------
      <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="100%" height="100%"
      >


      <radialGradient id="G1" cx="29%" cy="27%" r="45" fy="50%"
      spreadMethod="reflect" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="grey"/>
      <stop offset="0.5" stop-color="white">
      <animate attributeName="stop-color" dur="2s"
      values="black; white;black" repeatCount="indefinite"/>
      </stop>
      <stop offset="1" stop-color="black"/>
      </radialGradient>
      <mask id="M">
      <ellipse cx="29%" cy="35%" rx="10%" ry="20%" fill="url(#G1)"/>
      </mask>

      <rect y="140" x="23%" width="5%" height="55%" fill="cyan" />
      <rect y="140" x="30%" width="5%" height="55%" fill="green" />
      <g mask="url(#M)" transform="translate(0,90)">
      <image y="0" x="10%" width="40%" height="55%" xlink:href='http://srufaculty.sru.edu/david.dailey/svg/p17.jpg' />
      <rect y="0" x="15%" width="10%" height="55%" fill="purple" opacity=".6" />
      <rect y="0" x="33%" width="10%" height="55%" fill="yellow" opacity=".8" />
      </g>
      </svg>
      ----------------


      Example 2
      --------------
      <radialGradient id="G1" cx="29%" cy="50%" r="45" fy="50%"
      gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="grey"/>
      <stop offset="0.5" stop-color="white">
      </stop>
      <stop offset="1" stop-color="black"/>
      </radialGradient>
      <rect y="140" x="23%" width="25%" height="55%" fill="url(#G1)" >
      <animate attributeName="fill" dur="2s"
      values="black; white;black" repeatCount="indefinite"/>
      </rect>

      ----------

      [Non-text portions of this message have been removed]
    Your message has been successfully submitted and would be delivered to recipients shortly.