จะจัดสไตล์ SVG ด้วย CSS ภายนอกได้อย่างไร?


103

ฉันมีกราฟิก SVG หลายรายการที่ฉันต้องการแก้ไขสีผ่านสไตล์ชีตภายนอกไม่ใช่ในไฟล์ SVG แต่ละไฟล์โดยตรง ฉันไม่ได้วางกราฟิกไว้ในบรรทัด แต่เก็บไว้ในโฟลเดอร์รูปภาพของฉันและชี้ไปที่พวกเขา

ฉันได้ติดตั้งด้วยวิธีนี้เพื่อให้คำแนะนำเครื่องมือทำงานได้และฉันยังรวมแต่ละ<a>แท็กเพื่อให้มีลิงก์

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

ฉันใส่สิ่งต่อไปนี้ในไฟล์ CSS ภายนอกของฉัน (main.css):

.socIcon g {fill:red;}

แต่ก็ไม่มีผลต่อกราฟิก ฉันยังลอง. socIcon g path {} และ .socIcon path {}

มีบางอย่างไม่ถูกต้องบางทีการใช้งานของฉันไม่อนุญาตให้แก้ไข CSS ภายนอกหรือฉันพลาดขั้นตอน? ขอขอบคุณสำหรับความช่วยเหลือ! ฉันแค่ต้องการความสามารถในการปรับเปลี่ยนสีของกราฟิก SVG ผ่านสไตล์ชีตภายนอกของฉัน แต่ฉันจะสูญเสียคำแนะนำเครื่องมือและความสามารถในการเชื่อมโยงไปไม่ได้ (ฉันอาจจะอยู่ได้โดยปราศจากคำแนะนำ) ขอบคุณ!



ลองsvg { fill:red; }หรือตั้งชื่อคลาสให้กับเส้นทางของคุณ เช่น<path class="socIcon" d="M28.44 ..... />นี้ควรทำเคล็ดลับ
Dwza

คำตอบ:


93

ไฟล์ main.css ของคุณจะมีผลต่อเนื้อหาของ SVG เท่านั้นหากไฟล์ SVG รวมอยู่ใน 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>

หากคุณต้องการเก็บ SVG ของคุณไว้ในไฟล์คุณต้องกำหนด CSS ภายในไฟล์ SVG

คุณสามารถทำได้ด้วยแท็กสไตล์:

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>

คุณสามารถใช้เครื่องมือที่ฝั่งเซิร์ฟเวอร์เพื่ออัปเดตแท็กสไตล์ขึ้นอยู่กับสไตล์ที่ใช้งานอยู่ ในทับทิมคุณสามารถทำสิ่งนี้ได้ด้วย Nokogiri SVG เป็นเพียง XML ดังนั้นอาจมีไลบรารี XML จำนวนมากที่สามารถทำได้

หากคุณไม่สามารถทำได้คุณจะต้องใช้มันเหมือนกับ PNG การสร้างชุดสำหรับแต่ละสไตล์และบันทึกสไตล์แบบอินไลน์


17
หมายความว่าไม่มีวิธีใดที่จะได้รับประโยชน์จากการแคช SVG และใช้สไตล์ที่หลากหลายใช่หรือไม่? อินไลน์ดูเหมือนจะแคชไม่ดีในขณะที่วิธีการอื่น ๆ จะต้องสร้างรูปภาพหลายเวอร์ชันซึ่งจะไม่ได้รับประโยชน์จากการแคช
msg45f

อีกวิธีหนึ่งคือการเข้ารหัส SVG เป็น uris ข้อมูลภาพพื้นหลังโดยมีสีที่แตกต่างกันในแต่ละเวอร์ชันและใช้ gzip เพื่อลดขนาดไฟล์เนื่องจากการทำซ้ำ
Ruskin

1
ในกรณีของฉันฉันต้องการลบล้างรูปแบบองค์ประกอบจาก SVG CSS ของฉันไม่ทำงานเนื่องจากรูปแบบองค์ประกอบมีลำดับความสำคัญสูงกว่า วิธีแก้ปัญหาที่ง่ายที่สุดคือการเพิ่ม! important ให้กับสไตล์ CSS สำหรับ SVG จากนั้นทุกอย่างก็เรียบร้อยดี หากคุณต้องการหลีกเลี่ยงสิ่งสำคัญคุณต้องย้ายรูปแบบองค์ประกอบลงใน CSS
David Gausmann

อัปยศที่คุณไม่สามารถโหลดสไตล์ชีตภายใน svg จาก URL ได้
clayRay

1
@clayRay คุณจะทำได้เมื่อ SVG2 ร่างเสร็จสมบูรณ์w3.org/TR/SVG2/styling.html#LinkElement
RGB

52

คุณสามารถทำสิ่งที่คุณต้องการได้โดยมีข้อแม้ (สำคัญ) อย่างหนึ่ง: เส้นทางภายในสัญลักษณ์ของคุณไม่สามารถกำหนดสไตล์ได้อย่างอิสระผ่าน CSS ภายนอก - คุณสามารถตั้งค่าคุณสมบัติสำหรับสัญลักษณ์ทั้งหมดด้วยวิธีนี้เท่านั้น ดังนั้นหากคุณมีสองเส้นทางในสัญลักษณ์ของคุณและต้องการให้มีสีเติมที่แตกต่างกันสิ่งนี้จะไม่ได้ผล แต่ถ้าคุณต้องการให้เส้นทางทั้งหมดเหมือนกันสิ่งนี้ก็น่าจะใช้ได้

ในไฟล์ html ของคุณคุณต้องการสิ่งนี้:

<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>

และในไฟล์ SVG ภายนอกคุณต้องการสิ่งนี้:

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

สลับคลาสบนsvgแท็ก (ใน html ของคุณ) จากfill-redเป็นfill-blueและ ta-da ... คุณมีสีน้ำเงินแทนสีแดง

คุณสามารถหลีกเลี่ยงข้อ จำกัด ในการกำหนดเป้าหมายเส้นทางแยกกับ CSS ภายนอกได้บางส่วนโดยการผสมและจับคู่ CSS ภายนอกกับ CSS ในบรรทัดบนเส้นทางที่ระบุเนื่องจาก CSS ในบรรทัดจะมีความสำคัญกว่า วิธีนี้จะใช้ได้ผลถ้าคุณทำอะไรบางอย่างเช่นไอคอนสีขาวกับพื้นหลังสีซึ่งคุณต้องการเปลี่ยนสีของพื้นหลังผ่าน CSS ภายนอก แต่ไอคอนนั้นจะเป็นสีขาวเสมอ (หรือในทางกลับกัน) ดังนั้นด้วย HTML เหมือนเดิมและโค้ด svg นี้คุณจะได้พื้นหลังสีแดงและเส้นทางเบื้องหน้าสีขาว:

<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>

คำตอบที่ดี .. ฉันคิดว่าข้อแม้ควรเป็น: การรองรับเบราว์เซอร์ แต่ การอ้างอิงที่ดี (รายละเอียดมากกว่า caniuse): css-tricks.com/svg-fragment-identifiers-work
ptim

นี่คือทางออก! จริงๆแล้วไม่จำเป็นต้องรวมเนื้อหา svg ทั้งหมดในsymbolองค์ประกอบกล่าวคือคุณสามารถให้idองค์ประกอบ svg ได้ดังนั้น: `<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

12

คุณสามารถรวมลิงก์ไฟล์ SVG ของคุณไปยังไฟล์ css ภายนอกได้โดยใช้:

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

คุณต้องใส่สิ่งนี้หลังจากเปิดแท็ก:

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

ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบเพราะคุณต้องแก้ไขไฟล์ svg แต่คุณแก้ไขครั้งเดียวและกว่าการเปลี่ยนแปลงสไตล์ทั้งหมดสามารถทำได้ในไฟล์ css เดียวสำหรับไฟล์ svg ทั้งหมด


1
ว้าวมันใช้งานได้ แต่เพียง 1 โหวต ... วิธีนี้ดีสำหรับทุกสถานการณ์หรือไม่? มันง่ายมากทำไมถึงไม่เป็นคำตอบที่เลือก?
Bruno Vincent

ประเด็นทั้งหมดคือการรวมนิยามสไตล์ของคุณไว้ที่ส่วนกลาง สมมติว่าคุณมี SVG 10 รายการที่คุณต้องการจัดสไตล์ ตอนนี้คุณต้องคัดลอกอ้างอิงถึง CSS ลงใน SVG ทั้งหมดที่ต้องได้รับผลกระทบ และหากชื่อไฟล์ / ตำแหน่งของ CSS ของคุณเปลี่ยนไปคุณต้องอัปเดตเป็น 10 SVG คลาส CSS ให้ความรู้สึกเชิงสัญลักษณ์มากกว่าการอ้างอิงไฟล์ CSS ทางกายภาพ
Frans

โปรดทราบว่า svg ที่โหลดผ่านแท็ก <img> จะไม่โหลดเนื้อหาภายนอก (เช่นสไตล์ชีต)
Moose Morals

7

เป็นไปได้ที่จะจัดรูปแบบ SVG โดยการสร้างองค์ประกอบสไตล์แบบไดนามิกใน JavaScript และต่อท้ายองค์ประกอบ SVG แฮ็ก แต่ใช้งานได้

<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>

คุณสามารถสร้าง JavaScript แบบไดนามิกใน PHP ได้หากคุณต้องการ - ความจริงที่ว่าสิ่งนี้เป็นไปได้ใน JavaScript ทำให้เกิดความเป็นไปได้มากมาย


เฮ้ฉันชอบโซลูชันของคุณจริงๆและมันใช้งานได้ แต่ฉันต้องนำมาใช้กับสถานการณ์ของฉันหากคุณต้องการช่วยหลักสูตรระบบปฏิบัติการฉันมีแท็กสไตล์ <defs> อยู่ในฉันสามารถลบได้ด้วยตนเองและเรียกใช้โค้ดนี้ดังนั้นมันจึงจะสร้าง สไตล์มีวิธีที่ฉันสามารถลบ defs แล้วสร้างองค์ประกอบใหม่เหมือนที่คุณทำหรือเพียงแค่อัปเดตและ url มี url ข้อผิดพลาดไม่ได้กำหนดได้โปรดช่วยด้วยขอบคุณ
Kamel Mili

6

แนวทางหนึ่งที่คุณสามารถทำได้คือใช้ตัวกรอง CSS เพื่อเปลี่ยนรูปลักษณ์ของกราฟิก SVG ในเบราว์เซอร์

ตัวอย่างเช่นหากคุณมีกราฟิก SVG ที่ใช้สีเติมเป็นสีแดงภายในรหัส SVG คุณสามารถเปลี่ยนเป็นสีม่วงได้โดยตั้งค่าการหมุนสี 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);
}

ทดลองกับการตั้งค่าการหมุนสีอื่น ๆ เพื่อค้นหาสีที่คุณต้องการ

เพื่อความชัดเจน CSS ด้านบนจะอยู่ใน CSS ที่ใช้กับเอกสาร HTML ของคุณ คุณกำลังจัดรูปแบบแท็ก img ในโค้ด HTML ไม่ใช่สไตล์โค้ด SVG

และโปรดทราบว่าสิ่งนี้ใช้ไม่ได้กับกราฟิกที่มีสีดำหรือสีขาวหรือสีเทา คุณต้องมีสีจริงในการหมุนเฉดสีนั้น


4

วิธีแก้ปัญหาที่รวดเร็วมากในการมีสไตล์แบบไดนามิกด้วยสไตล์ชีต css ภายนอกในกรณีที่คุณใช้<object>แท็กเพื่อฝัง svg ของคุณ

ตัวอย่างนี้จะเพิ่มคลาสให้กับ<svg>แท็กรูทเมื่อคลิกที่องค์ประกอบหลัก

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>

Jquery:

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

เมื่อคลิกองค์ประกอบหลัก:

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

จากนั้นคุณสามารถจัดการ css ของคุณ

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;
}

1
ดูเหมือนจะไม่ได้ผลคุณช่วยเพิ่มตัวอย่างการทำงานได้ไหม
Jeanluca Scaljeri

4

ควรจะทำได้โดยการแทรกภาพ svg ภายนอกก่อน โค้ดด้านล่างมาจากการแทนที่รูปภาพ SVG ทั้งหมดด้วย SVG แบบอินไลน์โดย 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);
  });
});

3
โปรดทราบว่าสิ่งนี้จะใช้ได้ก็ต่อเมื่อคุณมีภาพที่โฮสต์บนโดเมนเดียวกันกับ html หรือมีนโยบายข้ามโดเมนที่กำหนดค่าไว้เป็นพิเศษบนเซิร์ฟเวอร์รูปภาพ $ .get จะใช้ ajax และไม่สามารถโหลดอิมเมจจากเซิร์ฟเวอร์ภายนอกได้หากไม่มีส่วนหัวอนุญาตให้เข้าถึงที่ถูกต้อง
user151496

นี่คือตำนาน
Tino Costa 'El Nino'

2

เมื่อใช้ใน<image>แท็ก SVG ต้องอยู่ในไฟล์เดียวด้วยเหตุผลด้านความเป็นส่วนตัว ข้อผิดพลาด Bugzillaนี้มีรายละเอียดเพิ่มเติมว่าเหตุใดจึงเป็นเช่นนั้น น่าเสียดายที่คุณไม่สามารถใช้แท็กอื่นเช่น<iframe>เนื่องจากจะไม่สามารถใช้เป็นลิงก์ได้ดังนั้นคุณจะต้องฝัง CSS ใน<style>แท็กภายในไฟล์

อีกวิธีหนึ่งในการทำเช่นนี้คือการมีข้อมูล SVG อยู่ในไฟล์ html หลักเช่น

<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>

คุณสามารถจัดรูปแบบด้วยไฟล์ CSS ภายนอกโดยใช้<link>แท็กHTML


2
ฉันไม่สามารถวางสไตล์ในไฟล์ได้ ฉันกำลังจะเปลี่ยนสีของรูปภาพเหล่านี้ตามโทนสีที่ผู้ใช้เลือกสำหรับไซต์ของฉัน การใช้งานปัจจุบันของฉันคือการเพิ่มสไตล์ชีตในหน้าหลักซึ่งเขียนทับสไตล์เริ่มต้น ฉันต้องการเปลี่ยนสีในไฟล์นั้นให้มีผลกับกราฟิก SVG ที่ฝังไว้ แต่นั่นจะไม่ได้ผลเพราะฉันต้องเชื่อมโยงไปยังสไตล์ชีทจากภายในไฟล์ SVG (เว้นแต่จะมีวิธีเพิ่มลิงก์นั้นไปยังไฟล์ SVG ทั้งหมดโดยใช้ JavaScript ด้วย) แน่นอนว่ามีวิธีอนุญาตไฟล์ SVG ภายนอก CSS ภายนอกลิงก์และคำแนะนำเครื่องมือ
Jordan H

1
ไม่สามารถทำในสิ่งที่คุณต้องการได้เนื่องจากรูปแบบความปลอดภัยของเบราว์เซอร์ คุณไม่สามารถใช้ javascript เพื่อจัดการ SVG เมื่อใช้เป็นรูปภาพ ลองนึกถึง SVG เมื่อใช้เป็นรูปภาพเหมือนกับไฟล์ png หรือ gif แบบเคลื่อนไหวทั้งหมดนี้อยู่ในไฟล์เดียวและไม่มีการเข้าถึงสคริปต์
Robert Longson

1

"ฉันกำลังจะเปลี่ยนสีของรูปภาพเหล่านี้ตามโทนสีที่ผู้ใช้เลือกสำหรับไซต์ของฉัน" - จอร์แดน 10 ชั่วโมงที่แล้ว

ฉันขอแนะนำให้คุณใช้ PHP สำหรับสิ่งนี้ ไม่มีวิธีใดที่ดีไปกว่านี้หากไม่มีแบบอักษรไอคอนและหากคุณต่อต้านการใช้คุณสามารถลองสิ่งนี้:

<?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>

และหลังจากนั้นคุณสามารถใช้ไฟล์นี้filename.php?color=#ffffffเพื่อรับไฟล์ svg ในสีที่ต้องการ


7
หมายเหตุว่ารหัสนี้ไม่ได้ตรวจสอบผู้ใช้ป้อน - สิ่งที่จะได้รับการจัดเป็นสีและ SVG ของคุณอาจจะไม่สามารถแสดงผลในรูปแบบที่น่าสนใจบางอย่าง ... ไม่แน่ใจว่ามันมีผลกระทบต่อคุณ แต่คุณควรจะทำให้มันเป็นนิสัยไปเสมอผู้ใช้ป้อนข้อมูลการตรวจสอบ สิ่งนี้จะช่วยได้: if (!preg_match('/^[#][0-9a-f]{6}$/i', $_GET['color'])) die('Oops!');(วางไว้ที่ใดที่หนึ่งในบล็อก PHP เริ่มต้น)
johndodo

1

สิ่งที่เหมาะกับฉัน: แท็กสไตล์ที่มีกฎ @ นำเข้า

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

1

ฉันรู้ว่ามันเป็นโพสต์เก่า แต่เพื่อเคลียร์ปัญหานี้ ... คุณแค่ใช้ชั้นเรียนผิดที่: D

ก่อนอื่นคุณสามารถใช้

svg { fill: red; }

ที่คุณmain.cssจะได้รับมันสีแดง สิ่งนี้จะมีผล คุณสามารถใช้ตัวเลือกโหนดได้เช่นกันเพื่อรับ pathes เฉพาะ

สิ่งที่สองคือคุณ declaired ระดับไปimg-Tag

<img class='socIcon'....

คุณควรปฏิเสธมันใน SVG ของคุณ หากคุณมี pathes ที่แตกต่างกันคุณสามารถกำหนดหลักสูตรได้มากขึ้น

<?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>

ตอนนี้คุณสามารถเปลี่ยนสีได้ตามmain.cssต้องการ

.myClassForMyPath {
    fill: yellow;
}

1
พยายามแล้วมันไม่ได้ผลเหมือนที่คำตอบอื่น ๆ พูดไปแล้ว คุณไม่สามารถใช้สไตล์กับชั้นเรียนใน SVG
Frans

@Frans คุณรวม svg เป็นไฟล์หรือคุณมีแหล่ง svg เหมือนในตัวอย่างด้านบนหรือไม่? เพราะฉันจำไว้ว่าสิ่งนี้ขึ้นอยู่กับว่าคุณใช้ svg อย่างไร รวมถึงโดย img เคยชิน
Dwza

แน่นอนว่าจะใช้งานได้ก็ต่อเมื่อคุณแทรก SVG ใน HTML ของคุณ แต่นั่นไม่ใช่สิ่งที่คุณทำในตัวอย่าง ใช้ SVG ภายนอก (เช่นไม่ใช่แบบอินไลน์) ดูเหมือนว่าจะไม่มีวิธีจัดรูปแบบ SVG ภายนอกด้วย CSS ใน HTML ของคุณ
Frans

แน่ใจว่าคุณลองตัวอย่างของฉันถูกต้อง? ฉันหมายถึงรวมไฟล์ css จากภายนอก? <?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
Dwza

ตกลงตอนนี้ฉันเห็นแล้วคุณมีไฟล์ <?xml-stylesheet ... ?>ประกาศใน SVG ของคุณ ฉันเดาว่าจะได้ผล คล้ายกับคำตอบอื่น ๆ ที่แนะนำให้<link rel="stylesheet" ... >อยู่ใน SVG นอกจากนี้ยังมีปัญหาเดียวกัน (คุณต้องอัปเดต SVG ทุกรายการเพื่อชี้ไปที่สไตล์ชีทและการเปลี่ยนแปลงชื่อหรือตำแหน่งของสไตล์ชีตหมายความว่าต้องเปลี่ยน SVG ทั้งหมดอีกครั้ง)
Frans

1
  1. สำหรับรูปแบบภายนอก

<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>

  1. สำหรับรูปแบบภายใน

<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>

หมายเหตุ: รูปแบบภายนอกจะไม่ทำงานหากคุณรวม SVG ไว้ภายใน <img>แท็ก มันจะทำงานได้อย่างสมบูรณ์แบบภายใน<div>แท็ก


0

@leo นี่คือรุ่น angularJS ขอบคุณอีกครั้ง

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 );

                } );

            } );
        }

    }

}

} );

-2

วิธีนี้จะใช้ได้ผลหากดู svg ภายในเว็บเบราว์เซอร์ แต่ทันทีที่อัปโหลดโค้ดนี้ไปยังเซิร์ฟเวอร์และคลาสสำหรับไอคอน svg จะถูกเข้ารหัสราวกับว่าเป็นภาพพื้นหลังสีจะหายไปและกลับไปเป็นสีเริ่มต้น . ดูเหมือนว่าสีจะไม่สามารถเปลี่ยนจากสไตล์ชีตภายนอกได้แม้ว่าทั้งคลาส svg สำหรับสีและคลาสเลเยอร์บนสุดสำหรับการแสดงผลและตำแหน่งของ svg จะถูกแมปกับไดเร็กทอรีเดียวกัน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.