SVG: mô hình bên trong không mở rộng quy mô không hoạt động?

Question

Khi sử dụng vector hiệu lực = "non-rộng-đột quỵ" bên trong một mô hình, tôi không nhận được kết quả mong đợi trong Firefox hoặc Chrome, mặc dù Opera việc như mong đợi ...

Ví dụ:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px"> 
<defs> 
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%"> 
     <path stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" /> 
    </pattern> 
</defs> 
<rect width="100%" height="100%" fill="url(#ticks)" /> 

Screenshot of results in Firefox, Chrome and Opera

tôi có làm điều gì sai, hay đây là một lỗi trong WebKit và Gecko? Nếu nó là một lỗi, có ai biết về cách giải quyết không?

Cảm ơn bạn đã được trợ giúp.

Answer 1

Tôi không có Opera để kiểm tra giải pháp này, nhưng dường như có kết quả mong muốn trên Chrome và Firefox.

@galdre là đúng. Bạn cần xác định stroke-width (giá trị là 0.1 được chỉ định bên dưới). Ngoài ra, bạn đang thiếu một đóng </svg>:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px"> 
    <defs> 
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%"> 
     <path stroke-width="0.1" stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" /> 
    </pattern> 
    </defs> 
    <rect width="100%" height="100%" fill="url(#ticks)" /> 
</svg>