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

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

Чтобы выполнить это, я обернуваю 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

Ответы

Ответ 1

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

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

svg {fill:black; float:left}

DEMO

Ответ 2

Попробуйте следующее:

#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; }

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

Надеюсь, это поможет. Mikey.

Ответ 3

Проблема заключается в том, что вы не указали пространство имен для элемента 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>