Tôi có thể thay đổi màu tô của đường dẫn svg bằng CSS không?

Tôi có đoạn mã sau:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

Có thể thay đổi màu tô của đường dẫn SVG bằng CSS hoặc một số phương tiện khác mà không thực sự thay đổi nó trong thẻ đường dẫn không?

Có, bạn có thể áp dụng CSS cho SVG, nhưng bạn cần khớp phần tử, giống như khi tạo kiểu HTML. Nếu bạn chỉ muốn áp dụng nó cho tất cả các đường dẫn SVG, bạn có thể sử dụng, ví dụ:

​path {
    fill: blue;
}​

CSS bên ngoài xuất hiện để ghi đè fillthuộc tính của đường dẫn , ít nhất là trong các trình duyệt dựa trên WebKit và Gecko mà tôi đã thử nghiệm. Tất nhiên, nếu bạn viết, giả sử, <path style="fill: green">thì điều đó cũng sẽ ghi đè CSS bên ngoài.

Nếu bạn muốn thay đổi màu sắc bằng cách di chuột vào phần tử, hãy thử điều này:

path:hover{
  fill:red;
}

Nếu bạn đi vào mã nguồn của tệp SVG, bạn có thể thay đổi màu tô bằng cách sửa đổi thuộc tính tô.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

Sử dụng trình soạn thảo văn bản yêu thích của bạn, mở tệp SVG và chơi xung quanh nó.

bạn đặt css này cho vòng tròn svg.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

Tôi đã tìm thấy một tài nguyên tuyệt vời trên css-trick: https://css-tricks.com/USE-svg/

Có một số giải pháp được giải thích ở đó.

Tôi thích cái được yêu cầu chỉnh sửa tối thiểu cho Svg nguồn và cũng không yêu cầu nó phải được nhúng vào tài liệu html. Tùy chọn này sử dụng <object>thẻ.

Thêm tệp svg vào html của bạn bằng cách sử dụng <object>; Tôi cũng đã khai báo các thuộc tính html widthvà height. Sử dụng các chiều rộng và chiều cao này, tài liệu svg không được thu nhỏ, tôi đã giải quyết vấn đề đó bằng cách sử dụng transform: scale(...)câu lệnh css cho svgthẻ trong tệp css svg được liên kết của tôi.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Tạo một tệp css để đính kèm vào tài liệu svn của bạn. Đường dẫn svg nguồn của tôi được thu nhỏ thành 16px, tôi nâng nó lên 64 với hệ số bốn. Nó chỉ có một đường dẫn nên tôi không cần chọn cụ thể hơn, tuy nhiên đường dẫn có thuộc tính điền nên tôi phải sử dụng !IMPORTANTđể buộc css trở thành tiền lệ.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Chỉnh sửa tệp svg mục tiêu của bạn, trước <svgthẻ mở , để bao gồm biểu định kiểu; Lưu ý rằng href có liên quan đến url tập tin svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

Bạn có thể sử dụng cú pháp này nhưng nó sẽ yêu cầu một số thay đổi trong tệp SVG. Và loại bỏ bất kỳ điền / đột quỵ từ chính SVG.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

Có thể thay đổi màu tô đường dẫn của svg. Xem bên dưới cho đoạn mã CSS:

1. Để áp dụng màu cho tất cả các đường dẫn: svg > path{ fill: red }

2. Để áp dụng cho đường dẫn d đầu tiên: svg > path:nth-of-type(1){ fill: green }

3. Để áp dụng cho đường dẫn d thứ hai: svg > path:nth-of-type(2){ fill: green}

4. Để áp dụng cho đường dẫn d khác nhau, chỉ thay đổi số đường dẫn:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Để hỗ trợ CSS trong Angular 2 đến 8, hãy sử dụng khái niệm đóng gói:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Đặt trong tất cả các Svg của bạn:

fill="var(--svgcolor)"

Trong Css:

:root {
  --svgcolor: tomato;
}

Để sử dụng các lớp giả:

span.github:hover {
  --svgcolor:aquamarine;
}

Giải trình

trang gốc = html.
--svgcolor = một biến.
span.github = chọn một phần tử span với github lớp, biểu tượng svg bên trong và gán di chuột giả lớp.