viewBox-invalid-02.svg

Enable keyboard shortcuts

Checkerboard

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

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

  <title>Testing invalid values for |viewBox| attributes</title>

  <defs>

    <rect id="redRect"  fill="red"  height="10" width="10"/>

    <rect id="limeRect" fill="lime" height="10" width="10"/>

  </defs>

  <rect fill="lime" height="100%" width="100%"/>

  <g transform="translate(0, 0)">

    <use xlink:href="#redRect"/>

    <!-- negative width/height in viewBox should ignore entire attribute -->

    <svg width="20" height="20" viewBox="0,0,0,-1">

      <use xlink:href="#limeRect"/>

    </svg>

  </g>

  <g transform="translate(20, 0)">

    <use xlink:href="#redRect"/>

    <!-- negative width/height in viewBox should ignore entire attribute -->

    <svg width="20" height="20" viewBox="0,0,-1,0">

      <use xlink:href="#limeRect"/>

    </svg>

  </g>

  <g transform="translate(40, 0)">

    <use xlink:href="#limeRect"/>

    <!-- zero width/height in viewBox should render nothing -->

    <svg width="20" height="20" viewBox="0,0,0,20">

      <use xlink:href="#redRect"/>

    </svg>

  </g>

  <g transform="translate(60, 0)">

    <use xlink:href="#limeRect"/>

    <!-- zero width/height in viewBox should render nothing -->

    <svg width="20" height="20" viewBox="0,0,20,0">

      <use xlink:href="#redRect"/>

    </svg>

  </g>

</svg>