dx
Thuộc tính dx cho biết một độ dịch chuyển theo trục x trên vị trí của một phần tử hoặc nội dung của nó.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Lines materialized the position of the glyphs -->
<line x1="0" x2="100%" y1="50%" y2="50%" />
<line x1="10%" x2="10%" y1="0" y2="100%" />
<line x1="60%" x2="60%" y1="0" y2="100%" />
<!-- Some reference text -->
<text x="10%" y="50%" fill="grey">SVG</text>
<!-- The same text with a shift along the x-axis -->
<text dx="50%" x="10%" y="50%">SVG</text>
</svg>
line {
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 3px;
}
feDropShadow
Với <feDropShadow>, dx xác định độ lệch x của bóng đổ. Đơn vị dùng để quy đổi giá trị thuộc tính được đặt bởi thuộc tính primitiveUnits của phần tử <filter>.
| Giá trị | <number> |
|---|---|
| Giá trị mặc định | 2 |
| Có thể hoạt ảnh | Có |
feOffset
Với <feOffset>, dx xác định độ lệch x của đồ họa đầu vào của bộ lọc. Đơn vị dùng để quy đổi giá trị thuộc tính được đặt bởi thuộc tính primitiveUnits của phần tử <filter>.
| Giá trị | <number> |
|---|---|
| Giá trị mặc định | 0 |
| Có thể hoạt ảnh | Có |
text
Với <text>, nếu nó chứa một giá trị duy nhất, dx xác định độ dịch chuyển theo trục x cho tất cả các glyph.
Nếu có nhiều giá trị, dx xác định độ dịch chuyển theo trục x cho từng glyph riêng lẻ tương đối với glyph đứng trước. Nếu có ít giá trị hơn glyph, các glyph còn lại dùng giá trị 0. Nếu có nhiều giá trị hơn glyph, các giá trị thừa sẽ bị bỏ qua.
| Giá trị | Danh sách (<length> | <percentage>) |
|---|---|
| Giá trị mặc định | không có |
| Có thể hoạt ảnh | Có |
Ví dụ
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Lines materialized the position of the glyphs -->
<line x1="0" x2="100%" y1="25%" y2="25%" />
<line x1="0" x2="100%" y1="50%" y2="50%" />
<line x1="0" x2="100%" y1="75%" y2="75%" />
<line x1="10%" x2="10%" y1="0" y2="100%" />
<line x1="30%" x2="30%" y1="0" y2="100%" />
<line x1="60%" x2="60%" y1="0" y2="100%" />
<!-- Behaviors change based on the number
of values in the attributes -->
<text dx="20%" x="10%" y="25%">SVG</text>
<text dx="0 10%" x="10%" y="50%">SVG</text>
<text dx="0 10% 20%" x="10%" y="75%">SVG</text>
</svg>
line {
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 3px;
}
tspan
Với <tspan>, nếu nó chứa một giá trị duy nhất, dx xác định độ dịch chuyển theo trục x cho tất cả glyph xen kẽ.
Nếu có nhiều giá trị, dx xác định độ dịch chuyển theo trục x cho từng glyph riêng lẻ tương đối với glyph đứng trước. Nếu có ít giá trị hơn glyph, các glyph còn lại dùng giá trị 0. Nếu có nhiều giá trị hơn glyph, các giá trị thừa sẽ bị bỏ qua.
| Giá trị | Danh sách (<length> | <percentage>) |
|---|---|
| Giá trị mặc định | không có |
| Có thể hoạt ảnh | Có |
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dx |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dx |
| Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute |