svg 9-slice scaling - +chrome + firefox -ie

svg-9slice-scaling.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="box">
        <!--top left-->
        <rect x="0" y="0" height="100" width="100"
          style="fill:#0000ff" />
        <!--top middle-->
        <rect x="100" y="0" height="100" width="300"
          style="fill:#008888" />
        <!--top right-->
        <rect x="400" y="0" height="100" width="100"
          style="fill:#00ff00" />
        <!--middle left-->
        <rect x="0" y="100" height="300" width="100"
          style="fill:#888800" />
        <!--middle middle-->
        <rect x="100" y="100" height="300" width="300"
          style="fill:#2a2a2a" />
        <!--middle right-->
        <rect x="400" y="100" height="300" width="100"
          style="fill:#ff0000" />
        <!--bottom left-->
        <rect x="0" y="400" height="100" width="100"
          style="fill:#000000" />
        <!--bottom middle-->
        <rect x="100" y="400" height="100" width="300"
          style="fill:#ff0088" />
        <!--bottom right-->
        <rect x="400" y="400" height="100" width="100"
          style="fill:#8800ff" />
    </g>
    <symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-middle" viewBox="100 0 300 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-right" viewBox="400 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-left" viewBox="0 100 100 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-middle" viewBox="100 100 300 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-right" viewBox="400 100 100 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-left" viewBox="0 400 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-middle" viewBox="100 400 300 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-right" viewBox="400 400 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
  </defs>
  <switch>
    <foreignObject x="0" y="0" width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;width:100px;top:0;left:0;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-top-right" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;left:100px;top:0;right:100px;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-top-middle" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;width:100px;top:0;right:0;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-top-left" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;top:100px;left:0;bottom:100px;width:100px;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-middle-left" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;top:100px;left:100px;bottom:100px;right:100px;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-middle-middle" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;top:100px;width:100px;bottom:100px;right:0;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-middle-right" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;width:100px;bottom:0;left:0;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-bottom-left" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;left:100px;bottom:0;right:100px;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <use xlink:href="#box-bottom-middle" />
        </svg>
      </div>
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute;height:100px;width:100px;bottom:0;right:0;">
        <svg
          width="100%" height="100%"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#box-bottom-right" />
        </svg>
      </div>
    </foreignObject>
  </switch>
</svg>