SVG <hình ảnh>
Hình ảnh SVG - <hình ảnh>
Phần tử <image>
được sử dụng để chèn hình ảnh vào SVG.
Phần mềm SVG phải hỗ trợ các tệp JPEG, PNG và các tệp SVG khác.
Phần tử <image>
có một số thuộc tính cơ bản để định vị và định hình hình ảnh:
Attribute | Description |
---|---|
width | Required. The width of the image |
height | Required. The height of the image |
href | Required. The URL of the image |
x | The x-position for the top-left corner of the image |
y | The y-position for the top-left corner of the image |
Chèn một hình ảnh
Ở đây chúng tôi chèn hình ảnh .jpg bên trong SVG:
Đây là mã SVG:
Ví dụ
<svg height="200" width="300" xmlns="https://www.w3.org/2000/svg">
<image height="200" width="300" href="pulpitrock.jpg" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
height
xác định chiều cao của hình ảnh - Thuộc tính
width
xác định chiều rộng của hình ảnh - Thuộc tính
href
xác định URL của hình ảnh
Thêm một số đồ họa
Ở đây chúng tôi hiển thị hình ảnh trên đầu vòng tròn màu xanh lam và thêm văn bản bên dưới hình ảnh:
Đây là mã SVG:
Ví dụ
<svg height="250" width="300" xmlns="https://www.w3.org/2000/svg">
<circle r="105" cx="150" cy="120" fill="lightblue" />
<image x="0"
y="60" width="300" height="100" href="pulpitrock.jpg" />
<text
x="84" y="180" fill="black">Pulpit Rock, Norway</text>
</svg>
Hãy tự mình thử »