vector-effect

Cú pháp

/* Các từ khóa */
vector-effect: none;
vector-effect: non-scaling-stroke;

/* Giá trị toàn cục */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;

Giá trị

none

Không áp dụng hiệu ứng vector nào cho phần tử, nghĩa là phần tử sẽ bị ảnh hưởng đầy đủ bởi các biến đổi như bình thường.

non-scaling-stroke

Độ rộng nét viền được vẽ của phần tử sẽ bằng vật lý với độ rộng nét viền đã được xác định, ngay cả khi phần tử đã được phóng to hoặc thu nhỏ do các biến đổi của chính nó hoặc hệ tọa độ của nó. Điều này đúng cho dù phần tử được thu phóng bằng biến đổi hay bằng cách thay đổi kích thước vật lý của toàn bộ ảnh.

Cú pháp chính thức

vector-effect = 
  none                |
  non-scaling-stroke  |
  non-scaling-size    |
  non-rotation        |
  fixed-position      

Ví dụ

Ngăn chặn thu phóng nét viền SVG bằng CSS

Ở đây, chúng ta bắt đầu với một ảnh SVG 200x100 chứa hai hình chữ nhật bên trong một nhóm. Nhóm được phóng to và xoay. Hình chữ nhật thứ hai có class là thinned.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="scale(2.3) rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#ddeeff88">
    <rect x=" 60" y="20" width="30" height="60" />
    <rect x="110" y="20" width="30" height="60" class="thinned" />
  </g>
</svg>

Chúng ta áp dụng width: 500px cho ảnh SVG này để làm nó lớn hơn kích thước nội tại, và đặt <rect> có class là thinned để có nét viền không thu phóng.

svg {
  width: 500px;
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

Kết quả là hình chữ nhật đầu tiên có độ rộng nét viền rõ ràng (hiển thị) khoảng 17, trong khi hình chữ nhật thứ hai vẫn có độ rộng nét viền rõ ràng là 3 dù đã được phóng to theo cùng cách với hình chữ nhật đầu tiên.

Ghi đè giá trị thu phóng nét viền SVG bằng CSS

Trong trường hợp này, chúng ta bắt đầu với ảnh SVG tương tự như ví dụ trước. Ở đây, phần tử <g> được xoay như trước, nhưng không áp dụng thu phóng cho nó. Các phần tử <rect> được cho điểm gốc chung cho các biến đổi, và thuộc tính SVG vector-effect của chúng được đặt thành giá trị none.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#ddeeff88">
    <rect
      x=" 60"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none" />
    <rect
      x="110"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none"
      class="thinned" />
  </g>
</svg>

Như trước, SVG được làm lớn hơn kích thước nội tại bằng CSS. Lần này, thu phóng được áp dụng trực tiếp cho các phần tử <rect>, và hình chữ nhật thứ hai được đặt để có nét viền không thu phóng.

svg {
  width: 500px;
}
svg rect {
  transform: scale(2.3);
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

Kết quả về mặt hình ảnh giống hệt ví dụ trước. Điều chúng ta thấy là giá trị thuộc tính none bị ghi đè bởi giá trị CSS non-scaling-stroke, và hiệu ứng vector được áp dụng ngay cả khi việc thu phóng được thực hiện trực tiếp trên <rect> thay vì trên phần tử cha <g>.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• stroke
• Kiểu dữ liệu <basic-shape>
• Thuộc tính SVG vector-effect