Làm cách nào để chia tỷ lệ đa giác SVG bằng ems?

Question

Tôi đang nhúng trực tiếp phần tử <svg> vào tài liệu HTML5 và tôi muốn mở rộng mô hình nền lặp lại theo kích thước phông chữ của trang. Không có vấn đề gì, SVG hỗ trợ các đơn vị CSS, vì vậy tôi có thể chỉ định kích thước bằng ems, phải không?

Thông số SVG claims "Tất cả coordinates và lengths trong SVG có thể được chỉ định có hoặc không có số nhận dạng đơn vị." Và, trên thực tế, cả hai thực hiện chính xác những gì tôi đã hy vọng cho:

<rect x='1em' y='2em' width='3em' height='4em' /> 
<circle cx='6em' cy='7em' r='8em' /> 

Nhưng đa giác (ví dụ) có riêng completely different definition của từ "phối hợp", chẳng hạn rằng điều này đặt ra một lỗi thay vì họ vẽ một 1 tam giác em:

<polygon points='0 0, 0 1em, 1em 0' /> 

Paths cũng giống như vậy - dễ hiểu vì chúng đã sử dụng các chữ cái cho một mục đích khác.

Và transformations như "quy mô" mong đợi một "số", không phải là một "phối hợp" hay "chiều dài", vì vậy đây là không được phép hoặc (trình duyệt của tôi dường như âm thầm bỏ qua "chuyển hóa" thuộc tính):

<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' /> 

Vì vậy, tôi đoán tôi thậm chí không thể tìm ra cách vẽ hình tam giác em, ít phức tạp hơn nhiều. Tôi có nhìn ra một cách hợp lý để làm điều đó không? Điều gì về một cách không hợp lý? Tôi có nên từ bỏ và sử dụng một yếu tố <canvas> thay vào đó, hoặc điều đó thậm chí còn tồi tệ hơn?

Answer 1

Bạn có thể bọc các đa giác của mình vào một phần tử bên trong <svg> để mở rộng chúng theo ý muốn. Khung nhìn điều khiển hệ tọa độ của các đối tượng nó chứa và thuộc tính chiều cao và chiều rộng kiểm soát độ lớn của nó.

<svg xmlns="http://www.w3.org/2000/svg"> 
    <svg viewBox="0 0 1 1" height="1em" width="1em" y="7em"> 
     <polygon points='0 0, 0 1, 1 0' /> 
    </svg> 
    <circle cx='6em' cy='7em' r='2em' /> 
</svg> 

Answer 2

Bạn có thể áp dụng biến đổi cho bất kỳ mục nào và sử dụng em hoặc bất kỳ đơn vị nào khác.

Ví dụ, điều này làm việc tốt:

<polygon points='0 0, 0 1, 1 0' transform='scale(2em 1.5em)' />