SVG, vector-effect = "non-scaling-stroke" и IE

Как я понимаю, атрибут SVG vector-effect="non-scaling-stroke" должен препятствовать искажениям штрихов (толще или тоньше), если/когда объект SVG масштабируется или растягивается.

Например, в этой скрипте (http://jsfiddle.net/1cj0ovae/5/) у меня есть два объекта SVG; оба они в 5 раз шире, чем высокие. Поскольку окно просмотра обоих вызовов для квадрата, SVG растягиваются и искажаются.

В верхнем SVG - зеленый путь искажен - он намного толще, чем предполагалось (stroke-width="2").

Однако в нижнем SVG красный путь отображается "правильно" - толщина 2px - потому что он имеет атрибут vector-effect="non-scaling-stroke".

Это работает в Chrome, Safari и Firefox, но не в последних версиях IE (например, IE10).

Является ли это ошибкой IE? Есть ли способ обхода?

ОТВЕТЫ

Ответ 1

вектор-эффекты являются частью SVG 1.2 крошечных и предстоящих и пока еще незавершенных спецификаций SVG 2.

IE ориентирован только на SVG 1.1, который не имеет векторных эффектов. Другие UA имеют вишневые части SVG 1.2 крошечные, такие как векторные эффекты, но никакой действующий UA не реализует все (Opera 12, я думаю).

Чтобы обойти это, выясните, насколько широким должен быть ход javascript. То есть выработайте разницу между преобразованием, применяемым к форме, и примените его к ширине штриха. Это не так просто, как я обнаружил, когда реализовал это в Firefox.