SVG изображение не обрезается в IE9 - PullRequest
Новая
       17

SVG изображение не обрезается в IE9

10 голосов
/ 12 мая 2011

следующий код: 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test.</title> 
    </head> 
    <body> 
        <div style="border: solid 1px black; height:100px; width:100px">
            <svg height="100" width="100" viewbox="00 0 100 100">
                <path id="map1" d="M210 10 L90 10 L90 90 " fill="red"/>
            </svg>
        </div>
</html>

JSFiddle: http://jsfiddle.net/HRsvX/

В Chrome и FF4 отображается div с рамкой и частью изображения, которая находится ВНУТРИ SVG-объекта. Все, что находится за пределами svg, не нарисовано.

IE9 отображает ВСЕ SVG-изображение. Это особенность или ошибка? Есть ли способ обрезать «исходящую» часть изображения?

Правильно ли обрабатывает среда Raphael такой случай?

1 Ответ

17 голосов
/ 12 мая 2011

Редактировать: В свете моего нового понимания спецификации , я должен исправить себя ниже.

Стиль по умолчанию, требуемый спецификацией для элементов вПространство имен SVG: 

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }

за http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

Итак, если вы хотите, чтобы IE9 соответствовал, вы можете использовать: 

svg:not(:root) { overflow: hidden; }

Как предложено здесь и здесь .

Следующее верно, если значение по умолчанию overflow: hidden переопределено:

Согласно SVG Spec , SVGобрабатывает overflow как любой другой элемент, когда содержится в документе, использующем CSS.Элементы внутри элемента переполняются, если только overflow: hidden или overflow:scroll, если они превышают размер родительского элемента.

В вашем примере, я вижу, что path превышает viewbox, определенный в svg элемент.Поскольку значение по умолчанию overflow равно visible, путь будет «кровоточить» за пределами svg элемента.Кроме того, он выходит за пределы родительских границ элемента svg и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...