SVG viewBox не работает с вложенными svgs в отрицательной позиции - PullRequest
Новая
       33

SVG viewBox не работает с вложенными svgs в отрицательной позиции

4 голосов
/ 06 февраля 2012

В этом примере зелёный кружок обрезан 

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
  <svg width="500" height="500" x="0" y="0"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
  <svg width="500" height="500" x="0" y="0"><circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" /></svg>
</svg> 
</body>
</html>

См .: http://jsfiddle.net/sCzZT/

Обратите внимание, что каждый кружок обернут в свою собственную svg

В этом примере (без вложенных svgs) зеленый кружок не обрезан 

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   <circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" />
</svg> 
</body>
</html>

http://jsfiddle.net/jVH9q/ Как получить зеленый кружок, чтобы он не обрезался при использовании вложенных svgs?

1 Ответ

12 голосов
/ 06 февраля 2012

Внутренний svg имеет видовой экран по умолчанию 0, 0, 500, 500 (x, y, ширина, высота) и по умолчанию все, что выходит за пределы этой области, скрыто / обрезано.

Есть несколько вещей, которые вы могли бы сделать ...

  1. добавить атрибут overflow = "visible" на внутренние элементы svg
  2. изменить значения x, y, чтобы окружность находилась в области просмотра
  3. добавьте viewBox, чтобы вы определили явный видовой экран, показывающий область, которую вы хотите видеть во внутреннем svg.
...