Sức mạnh của CSS sẽ giúp bạn định hình SVG! Tương lai: tạo kiểu nội dung bằng cách sử dụng các biến CSS. Bươc cuôi

Người biên soạn: Evgeny Ryzhkov Ngày xuất bản: 27/08/2010

Cập nhật cuối cùng: 17.11.2010

Hiển thị hình ảnh SVG trên trang HTML.

Có một số cách để thực hiện việc này nhưng không phải tất cả chúng đều có thể chạy trên nhiều trình duyệt.

Sự hiện diện của một khung đối với nhiều người đã đặt dấu chấm hết cho phương pháp này. Ngày nay có nhiều cách tiên tiến hơn để giải quyết vấn đề này. Hơn nữa, ở dạng này sẽ không thể thực hiện được hình ảnh trong suốt(khung có nền) và không có quyền truy cập từ các tập lệnh bên ngoài vào các thành phần của hình ảnh.

Trình duyệt của bạn không hỗ trợ định dạng SVG

Chúng tôi có: hợp lệ mã sạch, văn bản thay thế, nơi bạn có thể cung cấp cho người dùng hướng dẫn phải làm gì nếu họ không nhìn thấy ảnh (ví dụ: gửi đến trang web trình duyệt bình thường hoặc cung cấp liên kết tới plugin mà việc cài đặt sẽ giúp ích cho anh ta). Việc triển khai này hỗ trợ độ trong suốt của hình ảnh SVG (mặc dù có một vấn đề trong IE: các vùng trong suốt sẽ bị tô màu trắng). Trong số những điểm hạn chế: không có cách nào để tác động đến hình ảnh bằng các tập lệnh bên ngoài (từ HTML), chỉ có những tập lệnh có trong chính tệp SVG.

Phương pháp này tốt cho hinh nên hoặc bất kỳ hình ảnh tĩnh nào.

Phương pháp này được cho là cho phép các tập lệnh trong HTML tương tác với nội dung của tệp SVG (tôi chưa thể đạt được điều này). Đối với IE, nó có thuộc tính wmode(), thuộc tính này sẽ giúp hiển thị chính xác các vùng trong suốt của hình ảnh SVG. Thuộc tính pluginpage sẽ gửi người dùng có trình duyệt không hỗ trợ SVG đến trang plugin sẽ trợ giúp họ. Trong thực tế, ở dạng nguyên chất, thuộc tính này không có ý nghĩa gì. Đây chính xác là tùy chọn được Adobe khuyến nghị để hoạt động chính xác từ SVG Viewer. Phương pháp này sẽ không vượt qua xác nhận.

Phương pháp này hiện nay rất phổ biến.

XHTML + SVG

• Bạn nên chú ý đến không gian tên được sử dụng: xmlns:svg="http://www.w3.org/2000/svg">;
• tài liệu phải ở định dạng xhtml (cục bộ nó là một tệp có phần mở rộng .xhtml)
• Phương pháp này có khả năng tương thích đa trình duyệt kém. Phản hồi của IE đặc biệt tệ;
• mã html trở nên cực kỳ bẩn.

Tốt hơn là không nên sử dụng phương pháp này bây giờ.

IE, kể cả phiên bản 8, không hỗ trợ SVG. Tại đó thời gian của Microsoft tích cực quảng bá định dạng của nó - VML. Do đó, bạn sẽ phải mày mò trình duyệt này để xem được hình ảnh SVG ở đó (nhiều hơn về điều này trong các bài viết sau).

Rõ ràng, trong tương lai gần, định dạng SVG sẽ đi vào cuộc sống của các nhà phát triển web một cách triệt để. Để xác nhận điều này, người ta đã có thể tìm thấy các mô tả những cách thú vị triển khai SVG. Các nhà phát triển trình duyệt cho biết các phiên bản mới do họ sáng tạo sẽ hỗ trợ một số hoặc tất cả các phương pháp tích hợp SVG sau.

Nghĩa đen: có thể mở rộng Đồ họa vector. MVG? SVG! TRONG định dạng vector Bản thân hình ảnh không được lưu trữ mà là hướng dẫn xây dựng nó bằng cách sử dụng các điểm và đường cong.

TRONG định dạng raster thông tin về một số điểm hình ảnh cụ thể được đóng gói chặt chẽ thành một khối nhị phân. Việc xem xét nó cũng vô ích và bạn chỉ có thể thay đổi nó trong trình chỉnh sửa đồ họa.

định dạng SVG Bạn cũng có thể tạo và chỉnh sửa chúng trong các trình chỉnh sửa đồ họa như Illustrator, Sketch hoặc Inkscape. Nhưng nó cũng dựa trên văn bản, có nghĩa là nó có thể được mở dưới dạng HTML hoặc CSS trong bất kỳ trình soạn thảo mã nào.

Tôi sẽ nói cho bạn biết thêm: SVG giống như một trang HTML riêng biệt. Khi bạn chèn một SVG, thực tế là bạn không chỉ chèn một hình ảnh mà còn chèn toàn bộ trang. Với hệ tọa độ, khung nhìn, kiểu, tập lệnh và các tính năng tuyệt vời riêng.

Phong cách và kịch bản, Karl! Đây là một hình ảnh đơn giản dành cho bạn.

Nếu bạn xem SVG như trang riêng- bạn cần phương pháp chèn nào trở nên rõ ràng hơn. Có bốn cái chính và mỗi cái có những đặc điểm riêng.

Đầu tiên và đơn giản nhất là phần tử ngay trong mã HTML. Về cơ bản thì đây là điều tốt nhất phương pháp hiệu quả tải bất kỳ hình ảnh nào - trình duyệt biết trước từ mã HTML rằng nó tồn tại và bắt đầu tải nó.

Nhược điểm là các tập lệnh sẽ không hoạt động trong SVG như vậy và mọi nỗ lực tương tác với các phần tử bên trong đều sẽ thất bại. Tập tin sẽ giống như đằng sau tấm kính: bạn có thể nhìn vào nó nhưng không thể chạm vào nó. Mặc dù mọi thứ khác đều hoạt động tốt bên trong, bao gồm cả hoạt ảnh CSS.

Phương pháp này phù hợp nhất với những hình ảnh có nội dung không cần tương tác: logo, đồ thị, sơ đồ.

Cách thứ hai - Hình nền trong CSS. Hơn nữa, việc bạn gán nó cho một phần tử, phần tử giả hay chèn nội dung không thành vấn đề - kết quả sẽ giống như với : đằng sau tấm kính, nhưng có thứ gì đó đang hoạt động bên trong.

Phương pháp này phù hợp với những thiết kế đồ họa không cần tương tác: hình nền, biểu tượng và những thứ nhỏ nhặt khác.

Phương pháp thứ ba, thông qua , cuối cùng phá vỡ phần kính giữa trang và phần bên trong của tệp SVG. Tập lệnh, tương tác, hoạt ảnh hoạt động - nếu chúng được mô tả bên trong SVG. Bạn có thể chèn dự phòng giữa các thẻ, dự phòng này sẽ xuất hiện nếu trình duyệt không đọc SVG.

Trên thực tế, bạn thậm chí có thể sử dụng . thay vào đó, như thể bạn đang kết nối một trang khác. Nhưng nó hoạt động tốt hơn và thích ứng với kích thước của hình ảnh.

Phải trả giá cho sự linh hoạt: do thực tế là nó không còn chỉ là đồ họa và có thể viết kịch bản nên có các yêu cầu bảo mật khác cho phương pháp này. Ví dụ: bạn không thể chỉ chèn ảnh từ một tên miền khác.

Phương pháp này phù hợp khi bạn cần chèn một số đồ họa tương tác: đồ chơi, đồ họa và bất cứ thứ gì phức tạp. Chỉ cần nhớ rằng các video Flash đã từng được chèn qua. Hãy hỏi bố mẹ bạn đó là gì.

Phương pháp thứ tư bắt đầu hoạt động khi trình duyệt viết lại trình phân tích cú pháp HTML của họ theo tiêu chuẩn mới và nội dung của tệp SVG có thể được chèn trực tiếp vào trang, giống như bất kỳ thẻ nào khác.

Với SVG này, bạn có thể thực hiện những điều tương tự như với các phần tử HTML thông thường: kiểu, tập lệnh - bạn biết đấy. Ví dụ: bạn có thể thay đổi màu tô khi di chuột và mô tả mọi thứ theo kiểu chung.

Nhược điểm là những hình ảnh như vậy không được lưu vào bộ nhớ đệm riêng biệt khỏi trang - mặc dù điều này có thể tránh được thông qua các ký hiệu và tên người dùng, nhưng đây là một câu chuyện dài, chúng ta sẽ nói riêng về vấn đề này.

SVG không chỉ là một định dạng đồ họa - chúng tôi đã hiểu điều đó. Bạn muốn đào sâu hơn? Đọc bài viết của Sarah Suaidan, đây là bài viết hay nhất cho đến nay. Tất cả các liên kết đều có trong mô tả video.

Kết quả là: có rất nhiều cách và tất cả đều tốt ở một khía cạnh nào đó. Chọn cái phù hợp với nhu cầu của bạn, nhưng luôn bắt đầu với những cái đơn giản nhất: và nền tảng, sau đó làm phức tạp nó - nếu nó không đủ.

SVG là một định dạng đồ họa vector. Tên của nó có nghĩa đen là “đồ họa vector có thể mở rộng”. Nói một cách đơn giản, đây là những gì bạn làm việc trong Adobe Illustrator. SVG có thể dễ dàng được sử dụng trên web nhưng trước tiên có rất nhiều điều cần phải hiểu.

• Kích thước tệp nhỏ, khả năng nén tuyệt vời;
• Chia tỷ lệ theo bất kỳ kích thước nào mà không làm giảm chất lượng (trừ kích thước rất nhỏ);
• Có vẻ tốt trên võng mạc;
• Nhiều khả năng được cung cấp bởi các bộ lọc và tính tương tác.

Tạo một bản vẽ tùy chỉnh trong Adobe Illustrator. Ví dụ, đây là một con chim kiwi trên hình bầu dục.

Xin lưu ý rằng hình ảnh được cắt xén mạnh xung quanh các cạnh của hình ảnh. Canvas trong SVG đóng vai trò không kém gì PNG hoặc JPG.

Adobe Illustrator có thể lưu dưới dạng SVG.

Khi lưu, một hộp thoại khác có cài đặt sẽ xuất hiện. Thành thật mà nói, tôi không biết nhiều về họ. tồn tại toàn bộ hướng dẫn bởi Hồ sơ SVG. Tôi khá hài lòng với SVG 1.1.

Điều đáng lưu ý ở đây là bạn có tùy chọn nhấp vào OK và lưu tệp hoặc nhấp vào nút “Mã SVG…”, thao tác này sẽ mở cửa sổ TextEdit (ít nhất là trên máy Mac) có mã SVG.

Cả hai tùy chọn đều có thể hữu ích.

Trong Illustrator, không gian làm việc là 612px ✕ 502px.

Đây là những kích thước mà hình ảnh trên trang sẽ có nếu chúng không được chỉ định cụ thể. Kích thước của nó có thể được thay đổi bằng cách đặt thuộc tính chiều rộng hoặc chiều cao thành img, giống như PNG hoặc JPG. Đây là một ví dụ:

Một tùy chọn: kiểm tra hỗ trợ thông qua Modernizr và thay thế src cho hình ảnh:

David Bushell có một giải pháp thay thế rất đơn giản nếu bạn không bận tâm đến JavaScript trong phần đánh dấu của mình:

"this.onerror=null; this.src="image.png"" >

Đối với phương pháp chèn SVG này, bạn có thể sử dụng các kỹ thuật phân hủy sau:

Và một lần nữa chúng tôi sử dụng Modernizr:

Nếu vì lý do nào đó mà bạn không thích tùy chọn chèn SVG trực tiếp vào tài liệu (nó vẫn có một số nhược điểm, chẳng hạn như gần như không thể lưu vào bộ nhớ đệm), bạn có thể kết nối tệp SVG bằng cách sử dụng và giữ lại khả năng kiểm soát nó. các bộ phận sử dụng CSS.

Trong trường hợp điều này không được hỗ trợ, hãy triển khai quá trình xuống cấp bằng cách sử dụng lớp mà Modernizr thêm vào:

Cách tiếp cận này không gây ra vấn đề về bộ nhớ đệm và được trình duyệt hỗ trợ tốt hơn, hơn những người khác. Nhưng nếu bạn sử dụng tập tin bên ngoài với các kiểu hoặc được nhúng trong tài liệu, chuông và còi CSS sẽ không hoạt động, bạn cần thêm phần tử đó vào chính tệp SVG.

Có một cách để thêm tệp kiểu bên ngoài vào tệp SVG nếu điều này là cần thiết cho dự án, bộ đệm hoặc thứ gì khác. Qua thử nghiệm, tôi phát hiện ra rằng nó chỉ hoạt động đối với các tệp SVG được nhúng trong tài liệu bằng phần mở rộng . Đây là những gì bạn cần thêm vào tệp SVG của mình trước thẻ mở:

Nếu bạn cố gắng thêm mã này vào HTML, bạn sẽ gặp lỗi và trình duyệt thậm chí sẽ không nghĩ đến việc tải nó. Nếu bạn bao gồm tệp SVG trong đó mã được đề xuất thay thế hoặc hình nền, hệ thống sẽ không khiếu nại, nhưng mã đó sẽ không hoạt động (tuy nhiên, SVG sẽ được hiển thị).

SVG là tiêu chuẩn mới hình ảnh vector trong trình duyệt. Trình chỉnh sửa vectơ, chẳng hạn như Adobe Illustrator, cho phép bạn lưu trực tiếp đồ họa ở định dạng này và các trình duyệt hiện đại hiển thị SVG mà không gặp vấn đề gì.

Vì hình ảnh SVG được tạo thành từ đánh dấu nên chúng có thể được tạo và duy trì bằng cách sử dụng yêu thích của bạn soạn thảo văn bản, giống như bạn làm với HTML. Hơn nữa, bạn thậm chí có thể tạo kiểu cho SVG bằng sử dụng CSS, mặc dù bạn sẽ cần phải làm quen với sự khác biệt giữa kiểu dáng SVG và HTML.

Ranh giới giữa HTML và CSS rất rõ ràng. HTML chịu trách nhiệm về nội dung và cấu trúc, CSS để hiển thị. Ít nhất thì trong SVG, dòng này bị mờ. Cái này Lý do chính cái đó Trường văn bản và hình dạng thường được kiểm soát bằng các thuộc tính phần tử thay vì CSS:

Trong ví dụ này, chúng ta vẽ một hình chữ nhật được tô bằng thuộc tính fill. Màu sắc và chiều rộng của đường viền ngoài của hình chữ nhật được xác định bởi thuộc tính nét và chiều rộng nét. Nhưng bạn cũng có thể tạo kiểu cho hình chữ nhật như thế này bằng CSS:

Chúng tôi chỉ đơn giản sử dụng các thuộc tính làm thuộc tính CSS. Mặc dù, điều này không hoạt động cho tất cả các thuộc tính. Bạn không thể đặt giá trị vị trí cũng như chiều rộng và chiều cao theo cách này. Chúng ta sẽ chỉ sử dụng thuộc tính y cũng như chiều rộng và chiều cao.

Giống như trong HTML, chúng ta có thể làm việc với các lớp hoặc mã định danh của bất kỳ phần tử nào. Vì vậy, chúng ta sẽ xác định cách biểu diễn cho một tập hợp các phần tử SVG thông qua một lớp được tạo kiểu.

.example ( fill: đỏ; nét: xanh; chiều rộng nét: 2; )

Vì SVG không phân biệt giữa vùng đầu và vùng nội dung nên biểu định kiểu và bản thân nội dung có chung phần tử SVG, có thể so sánh với phần tử HTML.

Trong SVG, có thể sử dụng các lớp giả như:hover, thậm chí kết hợp với thuộc tính chuyển tiếp CSS3.

.example ( fill: red; Stroke: green; Stroke-width: 2; transition: tất cả 2 giây đều dễ dàng; ) .example:hover ( fill: blue; )

Sau khi triển khai ví dụ này, chúng ta sẽ thấy rằng khi chúng ta di chuột qua một phần tử có lớp mẫu được đặt cho nó, màu tô sẽ thay đổi từ đỏ sang xanh lam. Để tính năng này hoạt động bình thường, không nhúng SVG bằng thẻ img. Tốt hơn nên sử dụng nhúng hoặc iframe:

Khi sử dụng thẻ img, bản thân SVG sẽ hiển thị chính xác. Nhưng hiệu ứng di chuột và chuyển tiếp sẽ bị bỏ qua. Ngoài thuộc tính transition, chúng ta cũng có thể sử dụng Transform. Trong trường hợp này, các phần tử sẽ được thu nhỏ hoặc xoay.

.example:hover ( fill: blue; biến đổi: xoay(20deg); )

Khi sử dụng CSS3, hãy nhớ thêm tiền tố của nhà cung cấp để đảm bảo được hỗ trợ nhiều nhất có thể. hơn trình duyệt hiện đại. Mặc dù Chrome và Firefox xử lý kết xuất hoàn hảo, trình duyệt web IE từ chối hiển thị tác phẩm của bạn, mặc dù nó hoàn toàn có khả năng hiển thị các thuộc tính CSS3 này nếu bạn áp dụng chúng cho HTML.

Nếu bạn muốn tùy chỉnh SVG của mình cho một số quyền nhất định, chỉ cần sử dụng truy vấn phương tiện, ngay bên trong nó:

@media chỉ có màn hình và (độ rộng tối đa: 800px) ( .example ( display: none; ) )

Trong ví dụ này, các phần tử có lớp ví dụ được chỉ định sẽ không được hiển thị ngay khi chiều rộng màn hình hiển thị nhỏ hơn 800 pixel. Hãy cẩn thận, đây không phải là về chiều rộng của tài liệu mà là về chiều rộng của phần tử sóng mang SVG.

Đây chính là phần Hỏi & Đáp từ mã tiện dụng mà tôi đã cung cấp.

Hiện tại không có cách nào dễ dàng để nhúng hình ảnh SVG và sau đó truy cập các phần tử SVG thông qua CSS. Hiện hữu Các phương pháp khác nhau sử dụng các khung công tác JS SVG, nhưng chúng quá phức tạp nếu tất cả những gì bạn làm chỉ là một biểu tượng đơn giản với trạng thái di chuột qua.

Vì vậy, đây là những gì tôi nghĩ ra và tôi nghĩ đó là cách dễ nhất để sử dụng tệp SVG trên một trang web. Anh ấy lấy khái niệm của mình từ phương pháp sớm thay thế văn bản bằng hình ảnh, nhưng theo hiểu biết của tôi thì chưa bao giờ được thực hiện đối với SVG.

Đây là câu hỏi:

17 câu trả lời

Đầu tiên, sử dụng thẻ IMG trong HTML của bạn để chèn đồ họa SVG. Tôi đã sử dụng Adobe Illustrator để tạo đồ họa.

Điều này tương tự như cách bạn chèn một hình ảnh thông thường. Xin lưu ý rằng bạn cần đặt IMG cho lớp svg. Lớp "liên kết xã hội" chỉ là một ví dụ. ID không bắt buộc nhưng rất hữu ích.

Sau đó sử dụng mã jQuery này (trong một tệp riêng biệt hoặc nội tuyến trong HEAD).

/* * Thay thế tất cả hình ảnh SVG bằng SVG nội tuyến */ jQuery("img.svg").each(function())( var $img = jQuery(this); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); jQuery.get(imgURL, function(data) ( // Lấy thẻ SVG, bỏ qua phần còn lại var $svg = jQuery(data).find("svg"); // Thêm ID hình ảnh được thay thế vào SVG mới if(typeof imgID !== "không xác định") ( $svg = $svg.attr("id", imgID); ) // Thêm các lớp hình ảnh được thay thế vào SVG mới if(typeof imgClass !== "unknown") ( $svg = $svg.attr("class", imgClass+" replacement-svg"); ) // Xóa mọi XML không hợp lệ các thẻ theo http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); // Thay thế hình ảnh bằng SVG mới $img.replaceWith($svg), "xml");

Đoạn mã trên thực hiện tìm kiếm tất cả các IMG có lớp "svg" và thay thế nó bằng SVG nội tuyến từ tệp được liên kết. Một lợi ích lớn là nó cho phép bạn sử dụng CSS để thay đổi màu của SVG ngay bây giờ, ví dụ:

Svg:đường dẫn di chuột ( fill: red; )

Tôi cũng đã viết mã jQuery để chuyển ID nguồn và các lớp hình ảnh. Vì vậy CSS này cũng hoạt động:

#facebook-logo:đường dẫn di chuột ( fill: red; )

Liên kết xã hội:đường dẫn di chuột ( fill: red; )

Đường dẫn Svg ( điền: #000; )

$(document).ready(function() ( $("img").each(function() ( var $img = jQuery(this); var imgURL = $img.attr("src"); var attribute = $ img.prop("attributes"); $.get(imgURL, function(data) ( // Lấy thẻ SVG, bỏ qua phần còn lại var $svg = jQuery(data).find("svg"); // Xóa mọi thứ các thẻ XML không hợp lệ $svg = $svg.removeAttr("xmlns:a"); // Lặp qua các thuộc tính IMG và áp dụng trên SVG $.each(attributes, function() ( $svg.attr(this.name, this.value ); )); // Thay thế IMG bằng SVG $img.replaceWith($svg");

Nếu bạn có thể bao gồm các tệp trong phiên bản của mình (bao gồm PHP hoặc được bao gồm thông qua CMS), bạn có thể thêm mã SVG và đưa nó vào trang của mình. Điều này hoạt động tương tự như chèn nguồn SVG vào một trang nhưng giúp dọn dẹp trang sạch hơn.

Ưu điểm là bạn có thể nhắm mục tiêu các phần của SVG bằng CSS để di chuột - không cần javascript.

Bạn chỉ cần sử dụng quy tắc CSS như thế này:

#pathidorclass:hover ( fill: #303 !important; )

Lưu ý rằng cần có bit quan trọng để ghi đè màu tô.

Bây giờ bạn có thể sử dụng thuộc tính CSS bộ lọc trong hầu hết các trình duyệt hiện đại (bao gồm Edge, nhưng không phải IE11). Nó hoạt động với hình ảnh SVG cũng như các yếu tố khác. Bạn có thể sử dụng tính năng xoay màu hoặc đảo ngược để thay đổi màu sắc, mặc dù chúng không cho phép bạn thay đổi các màu khác nhau một cách độc lập. Tôi đang sử dụng lớp CSS sau để hiển thị phiên bản "bị vô hiệu hóa" của biểu tượng (trong đó bản gốc là hình ảnh SVG màu bão hòa):

Đã tắt ( opacity: 0,4; filter: thang độ xám(100%); -webkit-filter: thang độ xám(100%); )

Điều này làm cho nó xuất hiện màu xám nhạt trong hầu hết các trình duyệt. Trong IE (và có thể cả Opera Mini mà tôi chưa thử nghiệm), nó mờ đi đáng kể với thuộc tính độ mờ, trông vẫn khá đẹp mặc dù không có màu xám.

Dưới đây là ví dụ với bốn lớp CSS khác nhau cho biểu tượng chuông Twemoji: gốc (màu vàng), lớp "bị vô hiệu hóa" ở trên, xoay màu (xanh lục) và đảo ngược (xanh lam).

Twa-bell ( hình nền: url("https://twemoji.maxcdn.com/svg/1f514.svg"); hiển thị: khối nội tuyến; lặp lại nền: không lặp lại; vị trí nền: trung tâm trung tâm; chiều cao: 3em; chiều rộng: 3em; lề: 0 0,15em 0 0,3em; kích thước nền: 3em 3em; ; ) .hue-rotate ( filter: Hue-rotate(90deg); -webkit-filter: Hue-rotate(90deg); ) .invert ( filter: invert(100%); -webkit-filter: invert(100%) ;

@Drew Baker đã đưa ra giải pháp tuyệt vời để giải quyết vấn đề. Mã hoạt động chính xác. Tuy nhiên, những người sử dụng AngularJ có thể thấy nó phụ thuộc rất nhiều vào jQuery. Do đó, tôi nghĩ sẽ là một ý tưởng hay khi dán mã theo giải pháp của @Drew Baker dành cho người dùng AngularJS.

Phương thức AngularJs có cùng mã

1. Html: Sử dụng thẻ bên dưới trong tệp html:

2. Chỉ thị: Đây sẽ là chỉ thị mà bạn sẽ cần để nhận dạng thẻ:

"Sử dụng nghiêm ngặt"; Angular.module("myApp") .directive("svgImage", ["$http", function($http) ( return ( limit: "E", link: function(scope, element) ( var imgURL = element.attr ("src"); // nếu bạn muốn sử dụng ng-include, thì // thay vì dòng trên hãy viết dòng dưới đây: // var imgURL = element.attr("ng-include"); ("Loại nội dung": "application/xml")); phạm vi.manipulateImgNode = function(data, elem)( var $svg = Angular.element(data); var imgClass = elem.attr(" class"); if (typeof(imgClass) !== "không xác định") ( var class = imgClass.split(" "); for(var i = 0; i< classes.length; ++i){ $svg.classList.add(classes[i]); } } $svg.removeAttribute("xmlns:a"); return $svg; }; request.success(function(data){ element.replaceWith(scope.manipulateImgNode(data, element)); }); } }; }]);

Bất kỳ lớp nào bạn muốn (đường viền: 1px màu đỏ đặc; chiều cao: 300px; chiều rộng: 120px)

4. Unit test với Karma Jasmine:

"Sử dụng nghiêm ngặt"; mô tả("Chỉ thị: svgImage", function() ( var $rootScope, $compile, phần tử, phạm vi, $httpBackend, apiUrl, data; beforeEach(function() ( module("myApp"); tiêm(function($injector) ( $rootScope = $injector.get("$rootScope"); $compile = $injector.get("$compile"); $httpBackend = $injector.get("$httpBackend"); apiUrl = $injector.get( "apiUrl"); phạm vi = $rootScope.$new(); phần tử = góc.element(""); phần tử = $compile(element)(scope); phản hồi (200, ()); dữ liệu = "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + ""; biểu tượng/icon-man.svg").respond(200, data )); afterEach(function() ( $httpBackend.verifyNoOutstandingExpectation(); $httpBackend. verifyNoOutstandingRequest(); )); it("nên gọi thao tácImgNode ít nhất một lần" , function () ( $httpBackend.flush(); Expect(scope.manipulateImgNode.callCount).toBe(1); )); kết quả đúng", function () ( $httpBackend.flush(); var result = phạm vi.manipulateImgNode(dữ liệu, phần tử); mong đợi(kết quả).toBeDefined(); )); it("nên định nghĩa các lớp", function () ( $httpBackend.flush(); var result =scope.manipulateImgNode(data, element); var classList = ["svg"]; Expect(result.classList).toBe(classList) ); )); ));

Tôi hiểu rằng bạn muốn thực hiện việc này bằng CSS, nhưng xin nhắc lại trong trường hợp đó là một hình ảnh nhỏ, đơn giản - bạn luôn có thể mở nó trong Notepad++ và thay đổi đường dẫn điền /whatelement:

Điều này có thể tiết kiệm rất nhiều kịch bản xấu xí. Xin lỗi nếu điều này không có cơ sở, nhưng đôi khi giải pháp đơn giản có thể bị bỏ lỡ.

Thậm chí thay thế một số hình ảnh svg có thể có kích thước nhỏ hơn một số đoạn mã cho câu hỏi này.

Tôi đã viết một lệnh để giải quyết vấn đề này bằng AngularJS. Có sẵn.

Nó thay thế phần tử SVG sau khi được hiển thị và đặt nó vào bên trong phần tử div, làm cho CSS của nó dễ dàng thay đổi. Nó giúp sử dụng cùng một tệp SVG trong Những nơi khác nhau sử dụng các kích cỡ/màu sắc khác nhau.

Cách sử dụng rất đơn giản:

Sau này bạn có thể dễ dàng:

Svg-class svg ( fill: red; // bất kỳ màu nào bạn muốn )

Không có mã khung ở đây, chỉ có js thuần túy:

Document.querySelectorAll("img.svg").forEach(function(element) ( var imgID = element.getAttribution("id") var imgClass = element.getAttribution("class") var imgURL = element.getAttribution("src" ) xhr = new XMLHttpRequest() xhr.onreadystatechange = function() ( if(xhr.readyState == 4 && xhr.status == 200) ( var svg = xhr.responseXML.getElementsByTagName("svg"); if(imgID ! = null) ( svg.setAttribution("id", imgID); ) if(imgClass != null) ( svg.setAttribution("class", imgClass + " thay thế-svg"); ) svg.removeAttribution("xmlns:a ") if(!svg.hasAttribution("viewBox") && svg.hasAttribution("height") && svg.hasAttribution("width")) ( svg.setAttribution("viewBox", "0 0 " + svg.getAttribution( "height") + " " + svg.getAttribution("width")) ) element.parentElement.replaceChild(svg, element) ) ) xhr.open("GET", imgURL, true) xhr.send(null) ))

Đây là phiên bản dành cho loại trực tiếp.js dựa trên câu trả lời được chấp nhận:

Quan trọng: Điều này yêu cầu jQuery thay thế nó, nhưng tôi nghĩ nó có thể hữu ích đối với một số người.

Ko.bindHandlers.svgConvert = ( "init": function () ( return ("controlsDescendantBindings": true ); ), "update": function (element, valueAccessor, allBindings, viewModel, bindContext) ( var $img = $(element ); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src" ) ( // Lấy thẻ SVG, bỏ qua phần còn lại var $svg = $(data).find("svg"); // Thêm ID hình ảnh được thay thế vào SVG mới if (typeof imgID !== "unknown") ( $svg = $svg.attr(" id", imgID); // Thêm các lớp hình ảnh được thay thế vào SVG mới if (typeof imgClass !== "không xác định") ( $svg = $svg.attr("class", imgClass + " replacement-svg" ) // Xóa mọi thẻ XML không hợp lệ theo http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); $img.replaceWith($svg");

Sau đó, chỉ cần áp dụng data-bind="svgConvert: true" cho thẻ img của bạn.

Giải pháp này thay thế hoàn toàn thẻ img SVG và mọi ràng buộc bổ sung sẽ không được tôn trọng.

Có một thư viện mở mã nguồnđược gọi là SVGInject, sử dụng thuộc tính onload để kích hoạt quá trình tiêm. Dự án GitHub có thể được tìm thấy tại https://github.com/iconfu/svg-inject

Dưới đây là một ví dụ tối thiểu về việc sử dụng SVGInject:

Sau khi hình ảnh được tải, onload="SVGInject(this) sẽ kích hoạt quá trình tiêm và phần tử sẽ được thay thế bằng nội dung tập tin SVGđược chỉ định trong thuộc tính src.

Nó giải quyết một số vấn đề với việc tiêm SVG:

SVG có thể được ẩn cho đến khi quá trình tiêm hoàn tất. Điều này rất quan trọng nếu kiểu này đã được áp dụng tại thời điểm tải, nếu không sẽ dẫn đến "flash tạm thời mà không sử dụng nội dung".

Yếu tố tự động triển khai chúng. Nếu bạn thêm SVG một cách linh hoạt, bạn sẽ không phải lo lắng về việc gọi lại chức năng chèn.

Một chuỗi ngẫu nhiên được thêm vào mỗi ID trong SVG để tránh lặp lại cùng một ID trong tài liệu nếu SVG được nhập nhiều lần.

SVGInject là javascript đơn giản và hoạt động với tất cả các trình duyệt hỗ trợ SVG.

Nếu chúng ta có số lượng lớn Những hình ảnh svg như vậy chúng ta cũng có thể sử dụng file font.
Các trang web như https://glyphter.com/ có thể lấy tệp phông chữ từ svgs của chúng tôi.

Ví dụ.

@font-face ( font-family: "iconFont"; src: url("iconFont.eot"); ) #target( color: white; font-size:96px; font-family:iconFont; )

Vì SVG chủ yếu là mã nên bạn chỉ cần nội dung. Tôi đã sử dụng PHP để tìm nạp nội dung nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn.

Sau đó tôi in nội dung "nguyên trạng" bên trong thùng chứa div

Để hoàn thiện quy tắc cho các vùng chứa con SVG trong CSS

Lớp điền > svg ( fill: cam; )

Tôi đã nhận được những kết quả này bằng cách sử dụng biểu tượng vật liệu SVG:

Giải pháp được chọn là giải pháp tuyệt vời nếu bạn muốn jQuery xử lý tất cả các phần tử svg trong DOM và DOM của bạn ở kích thước hợp lý. Nhưng nếu DOM của bạn lớn và bạn quyết định tải các phần của DOM một cách linh hoạt thì việc quét lại toàn bộ DOM chỉ để cập nhật các phần tử svg thực sự chẳng ích gì. Thay vào đó hãy sử dụng plugin jQuery cho việc này:

/** * Một plugin jQuery tải tệp svg và thay thế là đối tượng jQuery với nội dung của nó. * * Đường dẫn đến tệp svg được chỉ định trong thuộc tính src (thường không tồn tại đối với phần tử svg). * * Các thuộc tính chiều rộng, chiều cao và lớp trong svg được tải sẽ được thay thế bằng các thuộc tính tồn tại trong html cơ bản của đối tượng jQuery. Lưu ý: Tất cả các thuộc tính khác trong phần tử gốc đều bị mất bao gồm thuộc tính style. Đặt * bất kỳ kiểu nào thay vào đó, trong một lớp kiểu */ (function ($) ( $.fn.svgLoader = function () ( var src = $(this).attr("src"); var width = this.attr("width") ; var Height = this.attr("height"); var cls = this.attr("class"); var ctx = $(this); // Lấy tệp svg và thay thế phần tử. )).done(function (html) ( let svg = $(html); svg.attr("width", width); svg.attr("height", Height); svg.attr( "class", cls) ; var newHtml = $("").append(svg.clone()).html();

Trong html, chỉ định phần tử svg như sau.