SVG เติมสีโปร่งใส / อัลฟ่าหรือไม่

416

เป็นไปได้หรือไม่ที่จะกำหนดความโปร่งใสหรือระดับอัลฟ่าบนสีเติม SVG?

ฉันได้ลองเพิ่มค่าสองค่าในแท็กการเติม (เปลี่ยนจากfill="#044B94"เป็นfill="#044B9466") แต่วิธีนี้ใช้ไม่ได้

สำหรับทุกคนที่สนใจที่จะได้รับการคลิกมากกว่าการเติมที่ว่างเปล่า: ดูSVG ตรวจหา Onclick เหตุการณ์ที่“เติมไม่มี” - คือความเป็นไปได้ที่จะใช้กับfill="none" pointer-events="visible"

— Fabien Snauwaert

645

คุณใช้แอตทริบิวต์ addtional fill-opacity: คุณลักษณะนี้ใช้ตัวเลขทศนิยมระหว่าง 0.0 ถึง 1.0 โดยรวม ที่ 0.0 มีความโปร่งใสอย่างสมบูรณ์

ตัวอย่างเช่น:

<rect ... fill="#044B94" fill-opacity="0.4"/>

นอกจากนี้คุณมีดังต่อไปนี้:

stroke-opacity คุณลักษณะสำหรับโรคหลอดเลือดสมอง
opacity สำหรับวัตถุทั้งหมด

— Williham Totland
แหล่งที่มา

3

MDN ให้ภาพรวมที่ดีของสิ่งนี้และคุณลักษณะอื่น ๆ ที่เกี่ยวข้องในการสอน SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/?hl=th

— t-mart

4

คุณสามารถใส่สิ่งเหล่านี้ลงในแอตทริบิวต์ style: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />

— PeterVermont

ในข้างต้น "fill-opacity" และ "stroke-opacity" ควรถูกแทนที่ด้วย "fill_opacity" และ "stroke_opacity" (นั่นคือแทนที่ยัติภังค์ด้วยขีดล่าง)

— mermaldad

1

@mermaldad นั่นไม่ถูกต้อง; ดูสเปค ในบางภาษาที่ไม่อนุญาตให้ชื่อที่จะมียัติภังค์ห้องสมุดสำหรับการทำงานที่มีชื่อใช้ SVG เหมือนfill_opacityแต่ใน SVG และ CSS fill-opacityก็

— Williham Totland

@WillihamTotland ขอบคุณสำหรับการแก้ไข ฉันเพิ่มขึ้นจิตใจตรงไปที่ "ฉันจะใช้งานได้อย่างไรโดยใช้ svgwrite ใน Python" ที่นั่นคุณจะต้องแทนที่ยัติภังค์ด้วยขีดล่าง

— mermaldad

78

ในฐานะที่เป็นวิธีการแก้ปัญหายังไม่ได้มาตรฐานอย่างเต็มที่ (แม้ว่าในแนวเดียวกันกับไวยากรณ์สี CSS3) fill="rgba(124,240,10,0.5)"คุณสามารถใช้เช่น ทำงานได้ดีใน Firefox, Opera, Chrome

นี่คือตัวอย่าง

— Erik Dahlström
แหล่งที่มา

3

ดูที่w3.org/TR/SVG/painting.html#FillProperties (เลื่อนลงเล็กน้อยเพื่อเติมความทึบ) ที่ดูเป็นมาตรฐานสำหรับฉัน

— Williham Totland

10

@williham: ใช่ความทึบอยู่ในคำแนะนำ SVG และไม่มีปัญหากับการใช้ ไวยากรณ์ CSS3 อยู่ใน CSS3 Color ซึ่งเป็นขั้นตอนเดียวที่จะกลายเป็นการแนะนำ w3c SVG 1.1 ไม่ได้อ้างอิง CSS3 Color เนื่องจากไม่สามารถใช้งานได้ในขณะนี้ SVG รุ่นอนาคตอาจเป็นเช่นนั้น

— Erik Dahlström

7

เพียงแค่ต้องการพูดถึงสถานที่แห่งหนึ่งที่ดูเหมือนจะไม่ทำงานอยู่ใน Inkscape

— George Mauer

2

ฉันใช้โซลูชันนี้กับ Highcharts และใช้งานได้ มันถูกแปลงrgbaเป็นrgbและเพิ่มfill-opacityแอตทริบิวต์ให้โดยอัตโนมัติ ฉันไม่แน่ใจว่านี่เป็นวิธีการทำงานใน SVG ปกติเหมือนกันหรือไม่ แต่นั่นเป็นวิธีการทำงานที่นั่น ทั้งสองวิธีขอบคุณ

— ฮันนา

3

ฉันขอคำชี้แจงได้ไหมว่าเบราว์เซอร์ใดสนับสนุน rgba ใน inline svgs ได้บ้าง?

— redanimalwar

6

fill="#044B9466"

นี่คือสี RGBAในรูปแบบเลขฐานสิบหกภายใน SVG ซึ่งกำหนดด้วยค่าฐานสิบหก สิ่งนี้ถูกต้อง แต่ไม่ใช่ทุกโปรแกรมที่สามารถแสดงได้อย่างถูกต้อง ...

คุณสามารถค้นหาการสนับสนุนเบราว์เซอร์สำหรับไวยากรณ์นี้ได้ที่นี่: https://caniuse.com/#feat=css-rrggbbaa

ตั้งแต่เดือนสิงหาคม 2560: สีเติม RGBA จะแสดงอย่างถูกต้องบน Mozilla Firefox (54), Apple Safari (10.1) และ "Quick View" ของ Mac OS X Finder's อย่างไรก็ตาม Google Chrome ไม่สนับสนุนไวยากรณ์นี้จนกระทั่งรุ่น 62 (ก่อนหน้านี้ได้รับการสนับสนุนจากรุ่น 54 ด้วยการเปิดใช้งานการตั้งค่าสถานะคุณลักษณะแพลตฟอร์มการทดลอง)

— นาย-IDE
แหล่งที่มา

คุณรู้หรือไม่ว่าพวกเขาเปลี่ยนอะไรบางอย่างเมื่อเร็ว ๆ นี้? ฉันมีแอปพลิเคชั่นโครเมี่ยมที่ใช้งานได้ซึ่งใช้การเติม: rgb (... ) และตอนนี้มันพังอย่างสมบูรณ์ ฉันจะขอความช่วยเหลือจากคุณ!

— Mariodiar

ไลบรารี Qt SVG (Qt 5.9.3) ยังไม่สามารถจัดการสี RGBA ได้ไม่ว่าจะเป็นรูปแบบเลขฐานสิบหก "# 00000000" หรือ "rgba"

— bkausbk

2

เพื่อให้การเติมโปร่งใสอย่างสมบูรณ์fill="transparent"ดูเหมือนว่าจะทำงานในเบราว์เซอร์ที่ทันสมัย แต่มันไม่ได้ทำงานใน Microsoft Word (สำหรับ Mac) fill-opacity="0"ผมต้องใช้

— เบร็ทโดนัลด์
แหล่งที่มา

สำหรับInkscape กราฟิกแบบเวกเตอร์บรรณาธิการ 0.92.4.0 , fill="none"ทำงาน แต่fill="transparent"ไม่ได้

— samm

1

ใช้แอตทริบิวต์fill-opacityในองค์ประกอบของ SVG

ค่าเริ่มต้นคือ 1, ค่าต่ำสุดคือ 0, ในขั้นตอนการใช้ค่าทศนิยม EX: 0.5 = 50% ของอัลฟา หมายเหตุ: มันเป็นสิ่งจำเป็นในการกำหนดสีที่จะใช้fillfill-opacity

ดูตัวอย่างของฉัน

อ้างอิง

— ดาร์ลานดีเทอริช
แหล่งที่มา