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

Question 1

ฉันมีกราฟิก 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 ผ่านสไตล์ชีตภายนอกของฉัน แต่ฉันจะสูญเสียคำแนะนำเครื่องมือและความสามารถในการเชื่อมโยงไปไม่ได้ (ฉันอาจจะอยู่ได้โดยปราศจากคำแนะนำ) ขอบคุณ!

Question 2

ไฟล์ 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 การสร้างชุดสำหรับแต่ละสไตล์และบันทึกสไตล์แบบอินไลน์

Question 3

คุณสามารถทำสิ่งที่คุณต้องการได้โดยมีข้อแม้ (สำคัญ) อย่างหนึ่ง: เส้นทางภายในสัญลักษณ์ของคุณไม่สามารถกำหนดสไตล์ได้อย่างอิสระผ่าน 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>

Question 4

คุณสามารถรวมลิงก์ไฟล์ 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 ทั้งหมด

Question 5

เป็นไปได้ที่จะจัดรูปแบบ 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 ทำให้เกิดความเป็นไปได้มากมาย

Question 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

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

Question 7

วิธีแก้ปัญหาที่รวดเร็วมากในการมีสไตล์แบบไดนามิกด้วยสไตล์ชีต 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;
}

Question 8

ควรจะทำได้โดยการแทรกภาพ 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);
  });
});

Question 9

เมื่อใช้ใน<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

Question 10

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

Question 11

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

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

Question 12

ฉันรู้ว่ามันเป็นโพสต์เก่า แต่เพื่อเคลียร์ปัญหานี้ ... คุณแค่ใช้ชั้นเรียนผิดที่: 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;
}

Question 13

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

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

ขยายข้อมูลโค้ด

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

<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>แท็ก

Question 14

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

                } );

            } );
        }

    }

}

} );

Question 15

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