Tại sao lồng phần tử <svg> bên trong phần tử <svg> khác?

Tại sao một bản trình diễn như thế này: http://jsbin.com/ejorus/2/edit, có phần tử <svg> được lồng vào bên trong một phần tử <svg> khác?Tại sao lồng phần tử <svg> bên trong phần tử <svg> khác?

<svg class="graph"> 
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none"> 
     <g transform="translate(30,0)"> 
      <!-- ... --> 
     </g> 
    </svg> 
</svg>

Các JS Bin là một phiên bản sửa đổi của the demo trong bài viết trên blog này: http://meloncholy.com/blog/making-responsive-svg-graphs/

Nguồn

2013-06-03 Web_Designer

Bạn nói đúng (như bạn nói trong Mr. Alien's answer) mà cả hai yếu tố SVG có vị trí tương đối giống nhau, và thực sự biểu đồ hiển thị tốt mà không có SVG bên ngoài.

Lý do tôi thêm vào đó là vì JavaScript (mà tôi cần để dừng nhãn bị thu thập) sử dụng phần tử SVG transform matrix (do thuộc tính viewBox áp dụng) để hủy bỏ văn bản.

Thật không may ma trận trả về không tính đến các biến đổi được áp dụng cho chính phần tử SVG, vì vậy tôi cần có ma trận biến đổi liên quan đến phần tử bên ngoài đã sử dụng initial coordinate system thay thế. Hy vọng rằng sẽ giúp.

Nguồn

2013-06-03 10:51:36 meloncholy

+1 Điều này hữu ích. Cảm ơn! Tôi đang cố gắng đưa ra một giải pháp vẽ đồ họa SVG có tính thuyết phục cho ứng dụng web của mình. Trong [bài viết của bạn] (http://meloncholy.com/blog/making-responsive-svg-graphs/) bạn đề cập đến [D3.js] (http://d3js.org/). Bạn sẽ giới thiệu nó? Tôi có một câu hỏi liên quan đến chủ đề mà tôi đang cố gắng sử dụng [Raphaël] (http://raphaeljs.com/): http://stackoverflow.com/questions/16848688/responsive-svg-line-graph-with- raphael Mọi lời khuyên sẽ được đánh giá cao! –

D3 rất tuyệt - nó thực sự mạnh mẽ và linh hoạt, mặc dù nó có đường cong học tập khá dốc. Tôi chắc chắn [cho nó đi] (http://christopheviau.com/d3_tutorial/). Điều đó nói rằng, nếu bạn muốn một cái gì đó khá phổ biến, bạn cũng có thể nhận được kết quả nhanh hơn từ các thư viện đồ thị khác. Tôi đã không sử dụng Raphael, vì vậy không thể bình luận về điều đó. Bạn cũng có thể muốn xem nhanh [số liệu thống kê web này] (http://meloncholy.com/blog/using-d3-for-realtime-webserver-stats/) điều tôi đã thực hiện (không phản hồi không may, nhưng sử dụng D3). Có một [demo here] (http://bits.meloncholy.com/mt-stats). – meloncholy

yếu tố SVG lồng nhau có thể có ích cho nhóm SVG hình dạng với nhau, và vị trí chúng như là một bộ sưu tập. Tất cả các hình dạng được lồng trong phần tử svg sẽ là positioned (x, y) relative to của position (x, y) trong số yếu tố svg kèm theo của nó. Bằng cách di chuyển các tọa độ x và y của phần tử sv2 kèm theo, bạn cũng di chuyển tất cả các hình lồng nhau.

Dưới đây là ví dụ trong đó hai hình chữ nhật được lồng trong hai phần tử svg . Ngoại trừ màu của hai hình chữ nhật có cùng định nghĩa cho x, y, height và width. Các yếu tố svg kèm theo có các giá trị x khác nhau. Vì các hình chữ nhật x-position của các hình chữ nhật được hiểu tương ứng với các yếu tố svg kèm theo của chúng x-position, hai hình chữ nhật được hiển thị ở các vị trí khác nhau x.

- Bằng Jakob Jenkov

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <svg x="10"> 
    <rect x="10" y="10" height="100" width="100" 
     style="stroke:#ff0000; fill: #0000ff"/> 
    </svg> 
    <svg x="200"> 
    <rect x="10" y="10" height="100" width="100" 
     style="stroke:#009900; fill: #00cc00"/> 
    </svg> 
</svg>

Credits

Nguồn

2013-06-03 05:10:14

xin vui lòng thêm nguồn – chrmod

@chrmod Bạn có thấy một liên kết mà nói ** Tín ** ở dưới cùng của câu trả lời? –

Điều này có được phép, nhiều SVG không? Điều này sẽ làm cho việc định vị trở nên dễ dàng hơn nhiều nếu bạn có thể sử dụng một vài 'svg' làm một khung công tác. – Martijn

Bạn có thể xác định viewport & viewbox mới. Với tùy chọn này, bạn có thể sử dụng relative positions như là css. Để biết thêm thông tin, bạn có thể xem trực tuyến article này.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Nested SVG</title> 
 
    <style> 
 
     html, 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: hidden; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <svg width="100%" height="100%"> 
 
     <rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" /> 
 
     <svg x="25%" y="25%" width="50%" height="50%"> 
 
      <rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" /> 
 
     </svg> 
 
    </svg> 
 
</body> 
 

 
</html>

Nguồn

2017-10-12 13:25:44 Yas

Tại sao lồng phần tử <svg> bên trong phần tử <svg> khác?

Trả lời

Các vấn đề liên quan