meshgradient-basic-001.svg

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/pservers/reftests/meshgradient-basic-001.svg - WPT Dashboard Interop Dashboard

Checkerboard

<svg id="svg-root"

  width="480" height="360" viewBox="0 0 480 360"

  xmlns="http://www.w3.org/2000/svg"

  xmlns:xlink="http://www.w3.org/1999/xlink"

  xmlns:html="http://www.w3.org/1999/xhtml">

  <g id="testmeta">

    <title>Mesh gradient: Single 1x1 patch (userSpaceOnUse).</title>

    <html:link rel="author"

          title="Tavmjong Bah"

          href="http://tavmjong.free.fr"/>

    <html:link rel="help"

          href="https://www.w3.org/TR/SVG2/pservers.html#MeshGradients"/>

    <html:link rel="match"  href="meshgradient-basic-001-ref.png" />

  </g>

  <style id="test-font" type="text/css">

    /* Standard Font (if needed). */

    @font-face {

      font-family: FreeSans;

      src: url("../fonts/FreeSans.woff") format("woff");

    text {

      font-family: FreeSans, sans-serif;

      text-anchor: middle;

      fill: black;

    #title {

      font-size: 24px;

    .label {

      font-size: 18px;

  </style>

  <defs>

    <meshgradient id="LinearMesh" x="20" y="140" gradientUnits="userSpaceOnUse">

      <meshrow>

        <meshpatch>

          <stop style="stop-color:#0000ff" path="l 200,0" />

          <stop style="stop-color:#00ff00" path="l 0,200" />

          <stop style="stop-color:#ffff00" path="l -200,0" />

          <stop style="stop-color:#00ff00" path="l 0,-200" />

        </meshpatch>

      </meshrow>

    </meshgradient>

    <meshgradient id="BezierMesh" x="260" y="140" gradientUnits="userSpaceOnUse">

      <meshrow>

        <meshpatch>

          <stop style="stop-color:#0000ff" path="c 66.6667,0  133.333,0  200,0" />

          <stop style="stop-color:#00ff00" path="c 0,66.6667  0,133.333  0,200" />

          <stop style="stop-color:#ffff00" path="c -66.6667,0  -133.333,0  -200,0" />

          <stop style="stop-color:#00ff00" path="c 0,-66.6667  0,-133.333  0,-200" />

        </meshpatch>

      </meshrow>

    </meshgradient>

  </defs>

  <g id="test-body-content">

    <rect x="20"  y="140" width="200" height="200" style="fill:url(#LinearMesh)" />

    <rect x="260" y="140" width="200" height="200" style="fill:url(#BezierMesh)" />

  </g>

</svg>