SVG <đường dẫn>
Đường dẫn SVG - <đường dẫn>
Phần tử <path>
được sử dụng để xác định đường dẫn.
Đường dẫn được sử dụng để tạo các hình dạng đơn giản hoặc phức tạp kết hợp một số đường thẳng hoặc đường cong.
Phần tử <path>
có một thuộc tính cơ bản xác định các điểm và các lệnh khác về cách vẽ đường dẫn:
Attribute | Description |
---|---|
d | Required. A set of commands which define the path.
The following commands are available for path data:
Note: All of the commands above can also be expressed in lower case. Upper case means absolutely positioned, lower case means relatively positioned. |
Một con đường đơn giản
Ví dụ bên dưới xác định một đường dẫn bắt đầu ở vị trí 150,5 với một đường đến vị trí 75.200, sau đó từ đó, một đường đến 225.200 và cuối cùng đóng đường dẫn trở lại 150,5:
Đây là mã SVG:
Ví dụ
<svg height="210" width="400" xmlns="https://www.w3.org/2000/svg">
<path d="M150 5 L75 200 L225 200 Z"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
Hãy tự mình thử » Đường cong Bézier
Đường cong Bézier được sử dụng để mô hình hóa các đường cong mượt mà có thể mở rộng vô hạn. Nói chung, người dùng chọn hai điểm cuối và một hoặc hai điểm kiểm soát. Đường cong Bézier có một điểm kiểm soát được gọi là đường cong Bézier bậc hai.
Ví dụ sau tạo đường cong Bézier bậc hai, trong đó A và C là điểm bắt đầu và điểm kết thúc, B là điểm kiểm soát:
Đây là mã SVG:
Ví dụ
<svg height="400" width="450" xmlns="https://www.w3.org/2000/svg">
<!-- Draw the paths -->
<path id="lineAB" d="M 100 350 l 150 -300"
stroke="red" stroke-width="4"/>
<path id="lineBC" d="M 250 50 l 150 300"
stroke="red" stroke-width="4"/>
<path id="lineMID" d="M 175 200 l 150 0"
stroke="green" stroke-width="4"/>
<path id="lineAC" d="M 100 350 q 150 -300
300 0" stroke="blue" stroke-width="4" fill="none"/>
<!-- Mark relevant
points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA"
cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>
<!-- Label the
points -->
<g font-size="30" font-family="sans-serif" fill="green"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text
x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Hãy tự mình thử »Tổ hợp? ĐÚNG!!!! Do sự phức tạp liên quan đến việc vẽ đường dẫn, nên sử dụng trình chỉnh sửa SVG để tạo đồ họa phức tạp.