làm tổ svg bên trong một div

Question

Tôi đang cố gắng tạo một hình tam giác svg đầy sẽ được đặt ở một số địa điểm trên trang.

Để thực hiện điều này, tôi bọc svg vào div và đặt div một cách thích hợp. Tuy nhiên, svg luôn được hiển thị bên ngoài div. Làm thế nào để có được phần tử svg được trả lại bên trong div?

tôi không thể sử dụng <object> hoặc thẻ <embed> do kịch bản và khuôn mẫu chế

HTML Mẫu

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

Và 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;} 

Các điền tam giác nên được bên trong hình chữ nhật màu đỏ nhưng được hiển thị bên ngoài

Xem nó trên JsFiddle

Answer 1

Thay đổi selector css, viết chỉ svg{...} và thêm float:left

Ở đây con đường chỉ là một bản vẽ không phải là một yếu tố.

svg {fill:black; float:left} 

DEMO

Answer 2

Hãy thử điều này:

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

tôi thêm một số phao nổi trong đó để họ 'chứa' các yếu tố. Có những cách tốt hơn và thanh lịch hơn để làm điều này, nhưng nó sẽ hoạt động.

Hy vọng điều này sẽ hữu ích. Mikey.

Answer 3

Vấn đề là bạn không chỉ định không gian tên cho phần tử svg. Đây là cách hoạt động:

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