HTML5 SVG - Định vị Văn bản

Question

Tôi đang cố định vị trí một phần tử <text> trong HTML5 SVG bằng cách cho nó một lề trên. Giả sử, tôi muốn phần tử <text> có lề trên cùng là 10px. Điều này sẽ không làm việc:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

Vấn đề là, rằng đối với các yếu tố văn bản SVG, khoảng cách y được đo từ điểm mấu chốt của văn bản, chứ không phải trên đỉnh. Mã này tạo văn bản chỉ hiển thị 10px dưới. Vì vậy, chúng ta phải thêm giá trị font-size với giá trị y để có được quyền margin:

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

Ít nhất, đó là những gì tôi nghĩ. Nhưng điều này không hoạt động. Bây giờ, lề trên là quá lớn, như bạn có thể thấy trong fiddle: http://jsfiddle.net/yy8gS/2/. Tôi muốn lề trên giống như lề trái, rõ ràng không phải như vậy. Trong thực tế, giá trị y của 48 có vẻ đúng nhưng tôi không biết tại sao, hoặc cách tôi có thể tính giá trị này cho các lề và kích thước phông chữ tùy ý. Dường như với tôi rằng giá trị font-size không phải là giá trị độ cao văn bản thực tế được sử dụng bởi SVG để định vị.

Ai có thể giúp tôi với điều này? Là những gì tôi đang cố gắng làm thậm chí có thể với SVG?

Cảm ơn trước!

Answer 1

Đặt dominant-baseline sẽ cung cấp cho bạn những gì bạn cần, có lẽ dominant-baseline="hanging" để vị trí văn bản được dựa trên đầu văn bản chứ không phải đường cơ sở.

Nếu bạn muốn biết phông chữ cao như thế nào thì bạn nên gọi getExtentOfChar để xác định nó thay vì giả sử bạn nhận được phông chữ có kích thước phông chữ chính xác như những gì bạn yêu cầu.

Answer 2

Bạn cũng có thể sử dụng em trong số các tài khoản y và dy!

này giải quyết vấn đề của tôi ít nhất là:

<div> 
 
    <p>working: margin as y-value:</p> 
 
    <svg style="height: 100px; border: 1px solid black"> 
 
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial"> 
 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
 
    </text>  
 
    </svg> 
 
</div>