Почему не этот SVG графический масштаб в IE9 и 10 (превью)?

Question

По данным IE сайт SVG поддерживается. И в соответствии с этим ответом тоже Какие браузеры поддерживают SVG (Scalable Vector Graphics)?

http://jsfiddle.net/jitendravyas/2UWNe/show/

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

Answer 1

IE, кажется, неправильно обрабатывает отсутствующий атрибут preserveAspectRatio. Вы можете увеличить его в IE, добавив preserveAspectRatio="xMinYMin slice", как показано здесь: http://jsfiddle.net/2UWNe/4/show

Однако то, что IE показывает, не является правильным поведением, и поэтому это изменение заставляет другие браузеры вести себя не так, как IE. (Microsoft, однако, считает, что они поддерживают preserveAspectRatio.)

Я не смотрел глубоко на ваши юниты или блоки контента. Какой эффект вы действительно пытаетесь достичь?

Answer 2

SVG не масштабируются так же, как растровые изображения, такие как JPG, PNG и GIF, которые имеют четко определенный размер.

Вам придется прибегать к хаки, чтобы гарантировать одинаковое отображение в разных браузерах.

Попробуйте это:

<svg width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 99.99%; height: 1px; overflow: visible; box-sizing: content-box; enable-background:new 0 0 381.1 381.1;" ... >

См. Демонстрацию

Подробнее

Answer 3

Проблема в том, что вы используете проценты для высоты и ширины, как описано здесь (http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/).

Если ширина и высота либо определены как нечто бесполезное, например, 100%, либо если они вообще не определены, эти браузеры догадаются о том, какие размеры должны основываться на точках и формах, определенных в тело файла SVG.

Измените на width=480 и height=360, и все будет в порядке.

Answer 4

Другой вариант - использовать единицы просмотра. Таким образом, ваш SVG будет масштабироваться в соответствии с размером окна:

<svg width="100%" height="20vw" viewBox="0 0 150 150"> 
      <rect x="10" y="10" width="150" height="130" fill="#00ff00"/>
</svg>

https://jsfiddle.net/orikon/qy43fb0p/