svg css góc tròn không hoạt động

Question

Tôi có tệp SVG mà tôi đang áp dụng CSS. Hầu hết các quy tắc dường như hoạt động, nhưng khi tôi áp dụng các quy tắc về làm tròn các góc (rx: 5; ry: 5) nó không có hiệu lực. Quy tắc kiểu nội tuyến 'Nội tuyến' hoạt động, nhưng tôi không có may mắn với các bảng định kiểu được nhúng và bên ngoài:

<svg ...> 
<defs> 
    <style type="text/css" > 
    <![CDATA[ 
    rect{ rx:5; ry:5; } 
    ]]> 
    </style> 
</defs> 

<rect 
    height="170" width="70" id="rect7" 
    x="0" y="0" /> 
</svg> 

Bất kỳ ý tưởng nào xảy ra?

Answer 1

rx và ry là các thuộc tính thông thường thay vì thuộc tính bản trình bày. Chỉ các thuộc tính bản trình bày mới có thể được tạo kiểu bởi CSS. Các thuộc tính thông thường/bản trình bày khác nhau được liệt kê here

Xem thêm Presentation Attribute và Property từ đặc tả SVG 1.1.

Đặc tả SVG 2 sắp tới đề xuất rằng hầu hết thuộc tính bản trình bày đều trở thành thuộc tính CSS. Cho đến nay chỉ có Chome đã thực hiện phần này của đặc tả dự thảo. Tôi tưởng tượng UAs khác sẽ thực hiện điều này trong khóa học do.

Answer 2

Scripting không thể đơn giản hơn, tại sao không sử dụng nó:

yourRect.setAttributeNS(null, "rx", "5"); 
yourRect.setAttributeNS(null, "ry", "5");