Tôi có thể sử dụng các đơn vị hỗn hợp với phần tử 'đường dẫn' không?

Question

SVG có phần tử hình chữ nhật có thể chỉ định kích thước theo phần trăm kích thước của chủ sở hữu và bán kính theo pixel. Vì vậy, bằng cách thực hiện như sau

<div style="position: relative;"> 
<object class="AIRound" type="image/svg+xml" 
data="data:image/svg+xml,<svg 
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' 
height='100%' rx='10px' ry='10px' fill='#99ff99' 
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px; 
width:100%; height:100%; z-index:-100;"></object> 
Sample text<br>Sample text 
Sample text<br>Sample text 
</div>

Tôi có thể nhận được với các góc tròn với bán kính không đổi phụ thuộc vào kích thước khối. Nhưng một hình chữ nhật đơn giản với các góc tròn nó nhàm chán và đôi khi bạn muốn một cái gì đó ưa thích (e. G. http://my.opera.com/). Tôi đã cố gắng sử dụng phần tử 'đường dẫn' nhưng có vẻ như với tôi, chúng tôi không thể sử dụng các đơn vị hỗn hợp với 'đường dẫn' (pixel & phần trăm). Tôi không thể sử dụng kết hợp các hình dạng vì nó sẽ không làm việc bán dẫn và tô màu gradient.

Vì vậy, qeustion của tôi có thể sử dụng phần tử 'đường dẫn' với các đơn vị hỗn hợp không? Có lẽ có một công việc khác mà tôi bỏ qua?

Answer 1

Đường dẫn và danh sách điểm chỉ có thể được chỉ định trong đơn vị người dùng. Bằng cách có một vùng chứa (ví dụ: một phần tử svg hoặc biểu tượng) chỉ định một hệ tọa độ mới với 'viewBox', điều này có thể ảnh hưởng đến những gì mà các đơn vị người dùng quyết định. Điều đó vẫn không giải quyết được tất cả các trường hợp.

Để khắc phục thêm một số trường hợp, bạn có thể tạo hình ảnh bằng cách sử dụng nhiều hình dạng, mỗi hình có một đường dẫn clip khác nhau để cắt bỏ các phần không mong muốn. Bạn có thể xem kết quả đầu ra SVG Rounded Corner Generator để biết ví dụ về cách tiếp cận đó.

Answer 2

Thật không may, tọa độ đường dẫn chỉ có thể được thể hiện bằng một đơn vị, tọa độ Viewport.

Answer 3

Có một workaround:

<svg width='100%' height='100%' viewBox='0 0 100 100'> 
<!-- Now in here, a coordinate (25,50) corresponds to 
    (25%,50%) of the outer viewport. --> 
<path d="M36,96 C 54,100 94,73 97,61 ..."/> 
</svg> 

Ref: http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html