ฉันสามารถเปลี่ยนสีเติมของเส้นทาง svg ด้วย CSS ได้หรือไม่

ฉันมีรหัสต่อไปนี้:

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

เป็นไปได้หรือไม่ที่จะเปลี่ยนสีเติมของเส้นทาง SVG ด้วย CSS หรือวิธีการอื่นโดยไม่เปลี่ยนแปลงในแท็กพา ธ

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

​path {
    fill: blue;
}​

CSS ภายนอกดูเหมือนจะแทนที่fillคุณลักษณะของเส้นทางอย่างน้อยในเบราว์เซอร์ที่ใช้ WebKit และ Gecko ที่ฉันทดสอบ แน่นอนถ้าคุณเขียนพูด<path style="fill: green">แล้วมันจะแทนที่ CSS ภายนอกเช่นกัน

หากคุณต้องการเปลี่ยนสีโดยวางเมาส์ไว้ในองค์ประกอบลองสิ่งนี้:

path:hover{
  fill:red;
}

หากคุณเข้าไปในซอร์สโค้ดของไฟล์ SVG คุณสามารถเปลี่ยนการเติมสีได้โดยการแก้ไขคุณสมบัติการเติม

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

ใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบเปิดไฟล์ SVG และเล่นกับมัน

คุณใส่ CSS นี้สำหรับวงกลม svg

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

ฉันเจอแหล่งข้อมูลที่น่าทึ่งเกี่ยวกับ css-tricks: https://css-tricks.com/using-svg/

มีคำอธิบายไม่กี่คำที่อธิบายได้

ฉันชอบสิ่งที่ต้องการการแก้ไขน้อยที่สุดกับ svg ต้นทางและไม่ต้องการให้ฝังลงในเอกสาร html ตัวเลือกนี้ใช้<object>แท็ก

เพิ่มไฟล์ svg ลงใน html ของคุณโดยใช้<object>; ฉันยังประกาศแอตทริบิวต์ HTML และwidth heightการใช้ความกว้างเหล่านี้และความสูงของเอกสาร svg ไม่ได้รับการปรับขนาดฉันได้แก้ไขโดยใช้transform: scale(...)คำสั่งcss สำหรับsvgแท็กในไฟล์ svg css ที่เกี่ยวข้องของฉัน

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

สร้างไฟล์ css เพื่อแนบกับเอกสาร svn ของคุณ เส้นทาง svg ต้นทางของฉันถูกปรับขนาดเป็น 16px ฉันปรับอัตราส่วนเป็น 64 ด้วยค่าสี่ มีเพียงเส้นทางเดียวดังนั้นฉันไม่จำเป็นต้องเลือกเฉพาะเจาะจงมากขึ้น แต่เส้นทางมีแอตทริบิวต์เติมดังนั้นฉันต้องใช้!IMPORTANTเพื่อบังคับ css ให้เป็นแบบอย่าง

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

แก้ไขไฟล์ svg เป้าหมายของคุณหน้า<svgแท็กเปิดเพื่อรวมสไตล์ชีท โปรดทราบว่า href สัมพันธ์กับ svg ไฟล์ url

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

คุณสามารถใช้ไวยากรณ์นี้ แต่จะต้องมีการเปลี่ยนแปลงบางอย่างในไฟล์ SVG และลบไส้ / จังหวะออกจาก 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>

เป็นไปได้ที่จะเปลี่ยนพา ธ เติมสีของ svg ดูตัวอย่าง CSS ด้านล่าง:

1. หากต้องการใช้สีสำหรับเส้นทางทั้งหมด: svg > path{ fill: red }

2. ในการสมัครเส้นทางแรก svg > path:nth-of-type(1){ fill: green }

3. ในการสมัครเส้นทางที่สอง d: svg > path:nth-of-type(2){ fill: green}

4. หากต้องการใช้สำหรับเส้นทาง d อื่นให้เปลี่ยนเฉพาะหมายเลขเส้นทาง:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. เพื่อสนับสนุน CSS ใน Angular 2 ถึง 8 ให้ใช้แนวคิดการห่อหุ้ม:

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

ใส่ svg ทั้งหมดของคุณ:

fill="var(--svgcolor)"

ใน Css:

:root {
  --svgcolor: tomato;
}

ในการใช้คลาส pseudo:

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

คำอธิบาย

หน้า root = html
--svgcolor = ตัวแปร
span.github = การเลือกองค์ประกอบการขยายด้วยคลาส gitHub, ไอคอน svg ด้านในและการกำหนดโฮเวอร์ pseudo-class