Làm cách nào để tạo kiểu SVG với CSS bên ngoài?

102

Tôi có một số đồ họa SVG, tôi muốn sửa đổi màu sắc của thông qua các biểu định kiểu bên ngoài - không trực tiếp trong mỗi tệp SVG. Tôi không đặt đồ họa vào dòng, nhưng lưu trữ chúng trong thư mục hình ảnh của tôi và trỏ đến chúng.

Tôi đã triển khai chúng theo cách này để cho phép các chú giải công cụ hoạt động và tôi cũng gói mỗi chú giải trong một <a>thẻ để cho phép liên kết.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

Và đây là mã của đồ họa SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Tôi đặt phần sau vào tệp CSS bên ngoài của mình (main.css):

.socIcon g {fill:red;}

Tuy nhiên, nó không ảnh hưởng đến hình ảnh. Tôi cũng đã thử đường dẫn .socIcon g {} và đường dẫn .socIcon {}.

Có điều gì đó không đúng, có lẽ việc triển khai của tôi không cho phép sửa đổi CSS bên ngoài hoặc tôi đã bỏ lỡ một bước? Tôi thực sự đánh giá cao sự giúp đỡ của bạn! Tôi chỉ cần khả năng sửa đổi màu sắc của đồ họa SVG thông qua biểu định kiểu bên ngoài, nhưng tôi không thể mất chú giải công cụ và khả năng liên kết. (Tuy nhiên, tôi có thể sống mà không có chú giải công cụ.) Cảm ơn!

— Jordan H
nguồn

Xem stackoverflow.com/questions/12604095/…

— Erik Dahlström

Thử svg { fill:red; }hoặc đặt tên lớp cho đường dẫn của bạn. Ví dụ: <path class="socIcon" d="M28.44 ..... />điều này sẽ thực hiện thủ thuật.

— Dwza

92

Tệp main.css của bạn sẽ chỉ ảnh hưởng đến nội dung của SVG nếu tệp SVG được đưa vào nội tuyến trong HTML:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

Nếu bạn muốn giữ SVG của mình trong tệp, CSS cần được xác định bên trong tệp SVG.

Bạn có thể làm điều đó với thẻ kiểu:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

Bạn có thể sử dụng một công cụ ở phía máy chủ để cập nhật thẻ kiểu tùy thuộc vào kiểu hiện hoạt. Với ruby, bạn có thể đạt được điều này với Nokogiri. SVG chỉ là XML. Vì vậy, có thể có nhiều thư viện XML có sẵn có thể đạt được điều này.

Nếu bạn không thể làm điều đó, bạn sẽ phải sử dụng chúng như thể chúng là PNG; tạo một tập hợp cho từng kiểu và lưu nội dòng các kiểu của chúng.

— RGB
nguồn

17

Điều này có nghĩa là không có phương pháp nào có lợi từ việc lưu vào bộ nhớ đệm SVG và áp dụng các kiểu khác nhau? Inline dường như không lưu vào bộ nhớ cache tốt, trong khi các phương pháp khác sẽ yêu cầu tạo nhiều phiên bản hình ảnh, loại bỏ bất kỳ lợi ích nào từ việc lưu trữ chúng vào bộ nhớ đệm.

— msg45f

Một cách khác là mã hóa SVG dưới dạng uris dữ liệu hình ảnh nền, với các màu khác nhau trên mỗi phiên bản và dựa vào gzip để giảm kích thước tệp do trùng lặp.

— Ruskin

1

Trong trường hợp của tôi, tôi muốn ghi đè các kiểu phần tử từ SVG. CSS của tôi không hoạt động vì các kiểu phần tử có mức độ ưu tiên cao hơn. Giải pháp đơn giản nhất là thêm một! Important vào kiểu CSS cho SVG. Sau đó mọi thứ đều ổn. Nếu bạn muốn tránh! Quan trọng, bạn cần chuyển các kiểu phần tử vào CSS.

— David Gausmann

tiếc là bạn không thể tải biểu định kiểu bên trong svg từ một URL

— clayRay

1

@clayRay, bạn sẽ có thể làm theo cách đó sau khi SVG2 hoàn tất bản nháp w3.org/TR/SVG2/styling.html#LinkElement

— RGB

51

Bạn có thể làm những gì bạn muốn, với một lưu ý (quan trọng): các đường dẫn bên trong biểu tượng của bạn không thể được tạo kiểu độc lập thông qua CSS bên ngoài - bạn chỉ có thể đặt các thuộc tính cho toàn bộ biểu tượng bằng phương pháp này. Vì vậy, nếu bạn có hai đường dẫn trong biểu tượng của mình và muốn chúng có các màu tô khác nhau, điều này sẽ không hoạt động, nhưng nếu bạn muốn tất cả các đường dẫn của mình giống nhau, điều này sẽ hoạt động.

Trong tệp html của bạn, bạn muốn một cái gì đó như thế này:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

Và trong tệp SVG bên ngoài, bạn muốn một cái gì đó như thế này:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

Hoán đổi lớp trên svgthẻ (trong html của bạn) từ fill-redsang fill-bluevà ta-da ... bạn có màu xanh lam thay vì màu đỏ.

Bạn có thể giải quyết một phần hạn chế của việc có thể nhắm mục tiêu các đường dẫn một cách riêng biệt với CSS bên ngoài bằng cách trộn và kết hợp CSS bên ngoài với một số CSS nội dòng trên các đường dẫn cụ thể, vì CSS trong dòng sẽ được ưu tiên hơn. Cách tiếp cận này sẽ hiệu quả nếu bạn đang làm một cái gì đó như biểu tượng màu trắng trên nền màu, nơi bạn muốn thay đổi màu của nền thông qua CSS bên ngoài nhưng bản thân biểu tượng luôn có màu trắng (hoặc ngược lại). Vì vậy, với HTML giống như trước đây và một cái gì đó giống như mã svg này, bạn sẽ nhận được nền màu đỏ và đường dẫn nền trước màu trắng:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

— Adam Korman
nguồn

câu trả lời tốt .. tôi nghĩ rằng điều cần lưu ý thực sự nên là: Hỗ trợ trình duyệt, mặc dù! tài liệu tham khảo tốt (chi tiết hơn caniuse): css-tricks.com/svg-fragment-identifiers-work

— ptim

Đây là một giải pháp! Trên thực tế, không cần phải bao bọc toàn bộ nội dung svg trong một symbolphần tử, tức là bạn có thể chỉ cần cung cấp một idphần tử svg, vì vậy: `<svg id = example" xmlns = " w3.org/2000/svg " viewBox = "0 0 256 256 "> <path class =" background "d =" M120 ... "/> <path class =" icon "style =" fill: white; "d =" M20 ... "/> </ svg > `

— SimoneMSR

11

Bạn có thể đưa vào liên kết tệp SVG của mình với tệp css bên ngoài bằng cách sử dụng:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

Bạn cần đặt cái này sau thẻ mở:

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

Đó không phải là giải pháp hoàn hảo, vì bạn phải sửa đổi các tệp svg, nhưng bạn sửa đổi chúng một lần và hơn hết tất cả các thay đổi kiểu dáng có thể được thực hiện trong một tệp css cho tất cả các tệp svg.

— Jacek Mamot
nguồn

Chà, đây là công việc, nhưng chỉ có 1 ủng hộ ... giải pháp này có tốt cho mọi tình huống không? Nó rất đơn giản, tại sao đây không phải là câu trả lời được chọn?

— Bruno Vincent

Toàn bộ vấn đề là tập trung vào các định nghĩa phong cách của bạn. Giả sử bạn có 10 SVG mà bạn muốn tạo kiểu. Bây giờ bạn cần sao chép trong một tham chiếu đến CSS vào tất cả các SVG cần bị ảnh hưởng. Và nếu tên tệp / vị trí CSS của bạn thay đổi, bạn cần phải cập nhật nó trong 10 SVG. Một lớp CSS mang lại cảm giác tượng trưng hơn nhiều so với một tham chiếu đến một tệp CSS vật lý.

— Frans

Lưu ý rằng svg được tải qua thẻ <img> sẽ không tải nội dung bên ngoài (ví dụ: bảng định kiểu).

— Moose Morals

7

Có thể tạo kiểu cho SVG bằng cách tạo động một phần tử kiểu trong JavaScript và gắn nó vào phần tử SVG. Hacky, nhưng nó hoạt động.

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

Bạn có thể tạo động JavaScript trong PHP nếu bạn muốn - thực tế là điều này có thể xảy ra trong JavaScript mở ra vô số khả năng.

— Pete
nguồn

Này, tôi thực sự thích giải pháp của bạn và nó đang hoạt động nhưng tôi cần áp dụng nó trên tình huống của mình nếu bạn sẵn sàng trợ giúp khóa học hệ điều hành, tôi có bên trong <defs> một thẻ kiểu, tôi có thể xóa chúng theo cách thủ công và chạy mã này để nó tạo ra một phong cách, là có một cách tôi có thể xóa các defs sau đó tái tạo phần tử như bạn đã làm hoặc chỉ cập nhật nó, và cũng là url có một url lỗi không được xác định, bạn có thể xin vui lòng giúp đỡ, cảm ơn bạn

— Kamel Mili

6

Một cách tiếp cận bạn có thể thực hiện chỉ là sử dụng bộ lọc CSS để thay đổi giao diện của đồ họa SVG trong trình duyệt.

Ví dụ: nếu bạn có đồ họa SVG sử dụng màu tô là màu đỏ trong mã SVG, bạn có thể chuyển nó thành màu tím với cài đặt xoay màu 180 độ:

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

Thử nghiệm với các cài đặt xoay màu khác để tìm màu bạn muốn.

Để rõ ràng, CSS ở trên nằm trong CSS được áp dụng cho tài liệu HTML của bạn. Bạn đang tạo kiểu cho thẻ img trong mã HTML, không tạo kiểu cho mã của SVG.

Và lưu ý rằng điều này sẽ không hoạt động với đồ họa có màu đen hoặc trắng hoặc xám. Bạn phải có một màu thực tế trong đó để xoay màu của màu đó.

— Simon White
nguồn

4

Một giải pháp rất nhanh để có kiểu động với biểu định kiểu css bên ngoài, trong trường hợp bạn đang sử dụng <object>thẻ để nhúng svg của mình.

Ví dụ này sẽ thêm một lớp vào <svg>thẻ gốc khi nhấp vào phần tử mẹ.

file.svg:

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

html:

<a class="parent">
  <object data="file.svg"></object>
</a>

Truy vấn:

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

trên phần tử mẹ nhấp chuột:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

sau đó bạn có thể quản lý css của mình

svg.css:

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

— vhanahrni
nguồn

có vẻ như không hoạt động, bạn có thể thêm một ví dụ làm việc?

— Jeanluca Scaljeri

4

Bạn có thể thực hiện điều này bằng cách nội dòng các hình ảnh svg bên ngoài. Đoạn mã dưới đây đến từ việc thay thế tất cả hình ảnh SVG bằng SVG nội tuyến của Jess Frazelle.

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

— Sư Tử
nguồn

3

importat cần lưu ý rằng điều này sẽ chỉ hoạt động nếu bạn có hình ảnh được lưu trữ trên cùng một miền với html hoặc có chính sách tên miền chéo được định cấu hình đặc biệt trên máy chủ hình ảnh. $ .get sẽ sử dụng ajax và thất bại trong việc tải các hình ảnh từ máy chủ bên ngoài nếu không có tiêu đề cho phép truy cập hợp lệ

— user151496

đây là huyền thoại

— Tino Costa 'El Nino'

2

Khi được sử dụng trong <image>thẻ, SVG phải được chứa trong một tệp vì lý do bảo mật. Đây lỗi bugzilla có thêm chi tiết về chính xác tại sao điều này là như vậy. Rất tiếc, bạn không thể sử dụng một thẻ khác chẳng hạn như thẻ <iframe>vì thẻ đó sẽ không hoạt động như một liên kết, vì vậy bạn sẽ phải nhúng CSS vào một <style>thẻ trong chính tệp đó.

Một cách khác để làm điều này là có dữ liệu SVG trong tệp html chính, tức là

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

Bạn có thể tạo kiểu đó bằng tệp CSS bên ngoài bằng <link>thẻ HTML .

— Robert Longson
nguồn

2

Tôi không thể đặt các kiểu trong các tệp. Tôi thực sự sẽ thay đổi màu sắc của những hình ảnh này dựa trên bảng màu mà người dùng đã chọn cho trang web của tôi. Cách triển khai hiện tại của tôi là thêm một biểu định kiểu vào trang chính để ghi đè các kiểu mặc định. Tôi muốn đặt các thay đổi màu trong tệp đó để ảnh hưởng đến đồ họa SVG được nhúng. Nhưng điều đó sẽ không hoạt động vì tôi phải liên kết đến biểu định kiểu từ trong tệp SVG (trừ khi có cách thêm liên kết đó vào tất cả các tệp SVG bằng JavaScript). Chắc chắn có một cách để cho phép các tệp SVG bên ngoài, CSS bên ngoài, liên kết và chú giải công cụ.

— Jordan H

1

Không thể làm những gì bạn muốn do mô hình bảo mật của trình duyệt. Bạn không thể sử dụng javascript để thao tác SVG khi được sử dụng làm hình ảnh. Hãy nghĩ về SVG khi được sử dụng dưới dạng hình ảnh giống như tệp png hoặc gif động, tất cả trong một tệp và không có quyền truy cập tập lệnh.

— Robert Longson

1

"Tôi thực sự sẽ thay đổi màu sắc của những hình ảnh này dựa trên bảng màu mà người dùng đã chọn cho trang web của tôi." - Jordan 10 giờ trước

Tôi đề nghị bạn sử dụng PHP cho việc này. Thực sự không có cách nào tốt hơn để làm điều này mà không có phông chữ biểu tượng và nếu bạn không muốn sử dụng chúng, bạn có thể thử cách này:

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

Và sau này, bạn có thể sử dụng tệp này filename.php?color=#ffffffđể có được tệp svg với màu mong muốn.

— SeinopSys
nguồn

6

Lưu ý rằng mã này không kiểm tra thông tin đầu vào của người dùng - bất kỳ thứ gì có thể được cung cấp dưới dạng màu sắc và SVG của bạn có thể được hiển thị theo một số cách rất thú vị ... Không chắc liệu nó có ảnh hưởng đến bạn hay không, nhưng bạn nên tạo thói quen LUÔN LUÔN xác thực thông tin nhập của người dùng. Một cái gì đó như thế này sẽ hữu ích: if (!preg_match('/^[#][0-9a-f]{6}$/i', $_GET['color'])) die('Oops!');(đặt nó ở đâu đó trong khối PHP bắt đầu).

— johndodo

1

Điều gì phù hợp với tôi: thẻ kiểu với quy tắc @import

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>

— Fordi
nguồn

1

Tôi biết nó là một bài viết cũ, nhưng chỉ để giải quyết vấn đề này ... bạn chỉ sử dụng các lớp học của mình không đúng chỗ: D

Trước hết, bạn có thể sử dụng

svg { fill: red; }

trong của bạn main.cssđể có được nó màu đỏ. Điều này có hiệu lực. Bạn cũng có thể sử dụng các bộ chọn nút để có được các bước đi cụ thể.

Điều thứ hai là, bạn đã khai báo lớp với -Tag img.

<img class='socIcon'....

Bạn thực sự nên khai báo nó bên trong SVG của mình. nếu bạn có các bước đệm khác nhau, tất nhiên bạn có thể xác định rõ hơn.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

bây giờ bạn có thể thay đổi màu sắc theo ý main.cssmuốn của bạn

.myClassForMyPath {
    fill: yellow;
}

— Dwza
nguồn

Đã thử điều này, nó không hoạt động, giống như nhiều câu trả lời khác đã nói. Bạn không thể áp dụng kiểu cho các lớp bên trong SVG.

— Frans

@Frans bạn đang bao gồm một svg dưới dạng tệp hay bạn có nguồn svg của mình như trong ví dụ trên? Bởi vì tôi lưu ý rằng điều này phụ thuộc vào cách bạn sử dụng svg. Kể cả bởi img sẽ không hoạt động.

— Dwza

Chính xác, nó chỉ hoạt động nếu bạn nội dòng SVG trong HTML của mình. Nhưng đó không phải là những gì ví dụ của bạn. Nó sử dụng SVG bên ngoài (tức là không nội tuyến). Có vẻ như không có cách nào để tạo kiểu SVG bên ngoài bằng CSS trong HTML của bạn.

— Frans

chắc chắn bạn đã thử ví dụ của tôi đúng? ý tôi là, bao gồm một tệp css từ bên ngoài? <?xml-stylesheet href="stylesheets/main.css" type="text/css"?>

— Dwza

OK, bây giờ tôi thấy, bạn có một <?xml-stylesheet ... ?>khai báo bên trong SVG của bạn. Tôi đoán điều đó sẽ hiệu quả. Nó tương tự như các câu trả lời khác đề xuất một <link rel="stylesheet" ... >bên trong SVG. Nó cũng có các vấn đề tương tự (bạn cần cập nhật từng SVG để trỏ đến biểu định kiểu và bất kỳ thay đổi nào về tên hoặc vị trí của biểu định kiểu có nghĩa là phải thay đổi lại tất cả SVG).

— Frans

1

Đối với phong cách bên ngoài

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

Mở rộng đoạn mã

Đối với kiểu nội bộ

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	    .socIcon g {fill:red;}
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

Mở rộng đoạn mã

Lưu ý: Kiểu bên ngoài sẽ không hoạt động nếu bạn bao gồm <img>thẻ bên trong SVG . Nó sẽ hoạt động hoàn hảo bên trong <div>thẻ

— Yuvraj Patil
nguồn

0

@leo đây là phiên bản angleJS, cảm ơn một lần nữa

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );

— Tino Costa 'El Nino'
nguồn

-1

Phương pháp này sẽ hoạt động nếu svg được xem trong trình duyệt web nhưng ngay sau khi mã này được tải lên máy chủ và lớp cho biểu tượng svg được mã hóa như thể nó là một hình nền, màu sẽ bị mất và trở lại màu mặc định . Có vẻ như không thể thay đổi màu từ bảng định kiểu bên ngoài mặc dù cả lớp svg cho màu và lớp lớp trên cùng cho hiển thị và vị trí của svg đều được ánh xạ vào cùng một thư mục.

— HTMLGUY1999
nguồn