it-swarm.com.ru

вложение svg внутри div

Я пытаюсь создать заполненный svg треугольник, который будет помещен в some место на странице.

Для этого я оборачиваю svg в div и помещаю div соответствующим образом. Тем не менее, SVG всегда отображается за пределами div. Как получить элемент svg, отображаемый внутри div?

Я не могу использовать тег <object> или <embed> из-за ограничений сценариев и шаблонов

Образец HTML

<div id="container">
    <div id="inner_container">
        <svg height="6" width="6">
            <path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
        </svg>
    </div>
</div>

И CSS

#container {width:100px; height:25px; border:1px solid green;}
#container #inner_container {width:6px; height:6px; border:1px solid red;}
#inner_container  svg path {fill:black;}

Заполненный треугольник должен быть внутри красного прямоугольника, но отображается снаружи

Смотрите это на JsFiddle

10
RedBaron

Измените селектор CSS, напишите только svg{...} и добавьте float:left

Здесь путь - это просто рисунок, а не элемент.

svg {fill:black; float:left}

ДЕМО

10
Sowmya

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

#container { float: left; width: 100px; height: 25px; border: 1px solid green; }
#container #inner_container { float: left; width: 6px; height: 6px; border: 1px solid red; }
#inner_container svg { display: block; float: left; }

Я добавил туда несколько поплавков, чтобы они «содержали» элементы. Есть лучшие и более элегантные способы сделать это, но это должно сработать.

Надеюсь, что это помогает . Майки.

2
Michael Giovanni Pumo

Проблема в том, что вы не указали пространство имен для элемента svg. Вот как это работает:

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
    <path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
  </svg>
</div>
0
yegor256