zagnieżdżanie svg wewnątrz div

Question

Próbuję utworzyć wypełniony trójkąt svg, który zostanie umieszczony na jakieś miejsce na stronie.

Aby to osiągnąć, zawijam svg w div i umieszczam element div w odpowiedni sposób. Jednak svg jest zawsze renderowany poza div. Jak uzyskać renderowanie elementu svg wewnątrz elementu div?

nie mogę użyć <object> lub tag <embed> powodu ograniczeń skryptowych i szablonowych

HTML Sample

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

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

Wypełniony trójkąt powinien być w środku czerwony prostokąt, ale jest renderowany poza

Zobacz na JsFiddle

Answer 1

Zmian selektor CSS, pisać i dodawać tylko svg{...}float:left

Tutaj ścieżka jest nie tylko rysunek element.

svg {fill:black; float:left} 

DEMO

Answer 2

Spróbuj tego:

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

dodam kilka pływaków tam tak, że 'zawierać' elementy. Są lepsze i bardziej eleganckie sposoby na zrobienie tego, ale powinno działać.

Mam nadzieję, że to pomoże. Mikey.

Answer 3

Problem polega na tym, że nie określono przestrzeni nazw dla elementu svg. Oto, jak to działa:

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