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

Question

Я пытаюсь создать заполненный треугольник 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

Answer 1

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

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

svg {fill:black; float:left} 

DEMO

Answer 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.

Answer 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>