nesting an svg inside a div

Gaara-

New Member
I am trying to create a filled svg triangle which will be placed at some place on the page.To accomplish this I wrap the svg in a div and place the div appropriately. However, the svg is always rendered outside of the div. How do I get the svg element rendered inside the div?I can't use the \[code\]<object>\[/code\] or the \[code\]<embed>\[/code\] tag due to scripting and templating constraintsSample HTML\[code\]<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>\[/code\]And the CSS\[code\]#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;}\[/code\]The filled triangle should be inside the red rectangle but is rendered outsideSee it on JsFiddle
 
Back
Top