Thuộc tính nét vẽ SVG
Thuộc tính nét vẽ SVG
Thuộc tính stroke
thiết lập màu của đường vẽ xung quanh một phần tử.
Ở đây chúng ta sẽ xem xét sáu thuộc tính stroke
:
-
stroke
- đặt màu của đường xung quanh một phần tử -
stroke-width
- đặt chiều rộng của dòng xung quanh một phần tử -
stroke-opacity
- đặt độ mờ của đường xung quanh một phần tử -
stroke-linecap
- đặt hình dạng của các đường cuối cho một đường thẳng hoặc đường dẫn mở -
stroke-dasharray
- đặt dòng hiển thị dưới dạng đường đứt nét -
stroke-linejoin
- thiết lập hình dạng của các góc nơi hai đường gặp nhau
Thuộc tính nét SVG
Thuộc tính stroke
xác định màu sắc của đường viền của một phần tử.
Thuộc tính stroke
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính stroke
có thể là tên màu, giá trị rgb hoặc giá trị hex.
Ở đây chúng ta sử dụng thuộc tính stroke
để đặt màu đường viền cho đa giác, hình chữ nhật, hình tròn và văn bản:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
<text
x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
Hãy tự mình thử » Ở đây chúng ta sử dụng thuộc tính stroke
để xác định màu của ba dòng:
Đây là mã SVG:
Ví dụ
<svg height="80" width="300" xmlns="https://www.w3.org/2000/svg">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="green" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
Hãy tự mình thử »Thuộc tính độ rộng nét SVG
Thuộc tính stroke-width
xác định độ rộng của nét.
Thuộc tính stroke-width
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Ở đây chúng ta sử dụng thuộc tính stroke-width
để đặt độ rộng của đường viền cho đa giác, hình chữ nhật, hình tròn và văn bản:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red"
stroke-width="4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue"
stroke-width="4" />
<text
x="420" y="100" fill="red" stroke="blue"
stroke-width="4">I love SVG!</text>
</svg>
Hãy tự mình thử » Ở đây chúng ta sử dụng thuộc tính stroke-width
để thiết lập độ rộng của ba dòng:
Đây là mã SVG:
Ví dụ
<svg height="80" width="300" xmlns="https://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
Hãy tự mình thử » Thuộc tính độ mờ nét SVG
Thuộc tính stroke-opacity
xác định độ mờ của nét.
Thuộc stroke-opacity
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính stroke-opacity
đi từ 0 đến 1 (hoặc 0% đến 100%).
Ở đây chúng tôi sử dụng thuộc tính stroke-opacity
để đặt độ mờ của đường viền cho đa giác, hình chữ nhật, hình tròn và văn bản:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" stroke-opacity="0.4" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red"
stroke-width="4" stroke-opacity="0.4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue"
stroke-width="4" stroke-opacity="0.4" />
<text
x="420" y="100" fill="red" stroke="blue"
stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
Hãy tự mình thử » Ở đây chúng tôi sử dụng thuộc tính stroke-opacity
để đặt độ mờ của ba dòng:
Đây là mã SVG:
Ví dụ
<svg height="80" width="300" xmlns="https://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
<path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
<path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
</g>
</svg>
Hãy tự mình thử »Thuộc tính nét vẽ SVG
Thuộc tính stroke-linecap
xác định các kiểu kết thúc khác nhau cho một đường thẳng hoặc một đường dẫn mở.
Thuộc tính stroke-linecap
có thể được sử dụng với các phần tử SVG sau: <path>
, <polyline>
, <line>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính stroke-linecap
có thể là "mông", "tròn" hoặc "vuông".
Ở đây chúng ta sử dụng thuộc tính stroke-linecap
để đặt các phần cuối khác nhau cho ba dòng:
Đây là mã SVG:
Ví dụ
<svg height="120" width="300" xmlns="https://www.w3.org/2000/svg">
<g fill="none" stroke="red"
stroke-width="16">
<path stroke-linecap="butt" d="M10 20
l215 0" />
<path stroke-linecap="round" d="M10 50 l215
0" />
<path stroke-linecap="square" d="M10 80 l215 0" />
</g>
</svg>
Hãy tự mình thử »Thuộc tính mảng nét vẽ SVG
Thuộc tính stroke-dasharray
được sử dụng để tạo các đường nét đứt.
Thuộc tính stroke-dasharray
có thể được sử dụng với các phần tử SVG sau: <circle>
, <ellipse>
, <line>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính stroke-dasharray
có thể là "none" hoặc danh sách độ dài/phần trăm được phân tách bằng dấu phẩy hoặc dấu cách để xác định độ dài của dấu gạch ngang và khoảng trống.
Ở đây chúng ta sử dụng thuộc tính stroke-dasharray
để tạo các đường đứt nét khác nhau:
Đây là mã SVG:
Ví dụ
<svg height="100" width="400" xmlns="https://www.w3.org/2000/svg">
<g
fill="none" stroke="red" stroke-width="6">
<path stroke-dasharray="5,5"
d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5
40 l215 0" />
<path stroke-dasharray="35,10" d="M5 60
l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5
80 l215 0" />
</g>
</svg>
Hãy tự mình thử » Ở đây chúng ta sử dụng thuộc tính stroke-dasharray
để tạo các đường viền nét đứt khác nhau cho đa giác, hình chữ nhật và hình tròn:
Đây là mã SVG:
Ví dụ
<svg width="600" height="220" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" stroke-dasharray="10,5" />
<rect width="150"
height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4"
stroke-dasharray="10,5" />
<circle r="45" cx="350" cy="100"
fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>
Hãy tự mình thử »Thuộc tính nối đường nét SVG
Thuộc tính stroke-linejoin
xác định hình dạng của các góc nơi hai đường thẳng gặp nhau.
Thuộc tính stroke-linejoin
có thể được sử dụng với các phần tử SVG sau: <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
và <tspan>
.
Giá trị của thuộc tính stroke-linejoin
có thể là "arcs", "bevel", "miter", miter-clip" hoặc "round".
Ở đây chúng ta sử dụng thuộc tính stroke-linejoin
để tạo các hình dạng góc khác nhau:
Đây là mã SVG:
Ví dụ
<svg width="600" height="230" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red"
stroke-width="16" stroke-linejoin="round" />
<rect width="150"
height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16"
stroke-linejoin="round" />
</svg>
<svg width="600" height="230" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red"
stroke-width="16" stroke-linejoin="miter" />
<rect width="150"
height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16"
stroke-linejoin="miter" />
</svg>
<svg width="600" height="230" xmlns="https://www.w3.org/2000/svg">
<polygon points="55,25 10,190
110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red"
stroke-width="16" stroke-linejoin="bevel" />
</svg>
Hãy tự mình thử »