căn chỉnh dọc của phần tử văn bản trong SVG

Giả sử tôi có tệp SVG:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

Tôi muốn bằng cách nào đó sắp xếp đầu avà b. Trên thực tế, tôi muốn định vị của tôi là theo rooflinethay vì baseline!

Tài alignment-baselinesản là những gì bạn đang tìm kiếm nó có thể lấy các giá trị sau

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

Mô tả từ w3c

Thuộc tính này xác định cách một đối tượng được liên kết với cha mẹ của nó. Thuộc tính này xác định đường cơ sở của phần tử này sẽ được căn chỉnh với đường cơ sở tương ứng của cha mẹ. Ví dụ, điều này cho phép các đường cơ sở chữ cái trong văn bản La Mã được căn chỉnh theo các thay đổi kích thước phông chữ. Nó mặc định là đường cơ sở có cùng tên với giá trị được tính của thuộc tính đường cơ sở căn chỉnh. Nghĩa là, vị trí của điểm căn chỉnh "ý thức hệ" theo hướng tiến triển khối là vị trí của đường cơ sở "ý thức hệ" trong bảng đường cơ sở của đối tượng được căn chỉnh.

Nguồn W3C

Thật không may, mặc dù đây là cách "chính xác" để đạt được những gì bạn có sau khi nó xuất hiện nhưng Firefox không triển khai nhiều thuộc tính trình bày cho Mô-đun văn bản SVG ( 'Tài liệu SVG trong Tài liệu MDN của Firefox )

Theo SVG spec, alignment-baselinechỉ áp dụng cho <tspan>, <textPath>, <tref>và <altGlyph>. Sự hiểu biết của tôi là nó được sử dụng để bù đắp những thứ từ <text>đối tượng phía trên chúng. Tôi nghĩ những gì bạn đang tìm kiếm là dominant-baseline.

Các giá trị có thể dominant-baselinelà:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Kiểm tra sự giới thiệu của W3C cho chi phối cơ sở bất động sản để biết thêm thông tin về mỗi giá trị có thể.

attr ("chiếm ưu thế", "trung tâm")

Nếu bạn đang thử nghiệm điều này trong IE, đường cơ sở thống trị và đường cơ sở căn chỉnh không được hỗ trợ.

Cách hiệu quả nhất để căn giữa văn bản trong IE là sử dụng cái gì đó như thế này với "dy":

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

Giá trị âm sẽ dịch chuyển nó lên và giá trị dương của dy sẽ dịch chuyển nó xuống. Tôi đã tìm thấy bằng cách sử dụng -.4em có vẻ hơi tập trung theo chiều dọc với tôi hơn -.5em, nhưng bạn sẽ là người đánh giá điều đó.

Sau khi xem Khuyến nghị của SVG, tôi đã hiểu rằng các thuộc tính cơ bản có nghĩa là định vị văn bản so với văn bản khác, đặc biệt là khi trộn các phông chữ và ngôn ngữ khác nhau. Nếu bạn muốn gửi văn bản sao cho nó đứng đầu ythì bạn cần sử dụng dy = "y + the height of your text".