สีพื้นหลังของข้อความใน SVG

103

ฉันต้องการให้สีพื้นหลังของ svg textคล้ายกับbackground-colorใน css

ฉันพบเฉพาะเอกสารประกอบfillซึ่งเป็นสีของข้อความเอง

เป็นไปได้หรือไม่?

css  svg  background-color 
— Nick Ginanto
แหล่งที่มา
คุณสามารถแบ่งปันรหัสของคุณได้หรือไม่?
— gotohales
สิ่งเหล่านี้อาจช่วยให้stackoverflow.com/questions/6725288/svg-text-inside-rectและstackoverflow.com/questions/8675223/…
— gotohales
stackoverflow.com/questions/12260370/…ยังแสดงวิธีการใช้ตัวกรอง
— Erik Dahlström
1
@RobertLongson การปิดคำถามนี้ซ้ำเมื่อถูกถาม 2 ปีก่อนคำถามอื่นดูเหมือนจะผิดโดยเฉพาะอย่างยิ่งเมื่อมีคำตอบเดียวคือคุณ
— Balthazar
@ Aperçu: อายุของคำถามที่ไม่ได้เป็นปัจจัยหลักในการเลือกเป้าหมายที่ซ้ำกันดูตัวอย่างที่นี่
— บีบแตร

คำตอบ:

95

ไม่มีนี้เป็นไปไม่ได้องค์ประกอบ SVG ไม่ได้มีคุณลักษณะที่นำเสนอbackground-...

ในการจำลองเอฟเฟกต์นี้คุณสามารถวาดสี่เหลี่ยมผืนผ้าด้านหลังแอตทริบิวต์ข้อความด้วยfill="green"หรือสิ่งที่คล้ายกัน (ตัวกรอง) การใช้ JavaScript คุณสามารถทำสิ่งต่อไปนี้:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);
— sluijs
แหล่งที่มา
9
ที่หรือใช้ตัวกรอง svg (feFlood + feComposite) บนข้อความ ดูคำถามที่คล้ายกันเล็กน้อยstackoverflow.com/questions/12260370/… .
— Erik Dahlström
3
วิธีแก้ปัญหานี้โดยใช้ getBBox () แม้ว่าจะใช้งานได้ดี แต่อาจค่อนข้างช้าเมื่อต้องทำการคำนวณจำนวนมาก ปัญหาในการใช้ตัวกรอง svg (feFlood + feComposite) คือข้อความจะมีรอยหยักเล็กน้อย ได้เสนอวิธีแก้ปัญหาที่เรียบง่าย แต่แฮ็กไว้ด้านล่าง
— dbarton_uk
ดีกว่าที่จะใช้ textElm = document.getElementById ("the-text") แทน textElm = ctx.getElementById ("the-text")?
— Simon Hi
ฉันใช้ฟังก์ชัน getBBox เดียวกันใน nodeJS ได้อย่างไร
— Ali
78

คุณสามารถใช้ตัวกรองเพื่อสร้างพื้นหลัง

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor" />
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
ขยายข้อมูลโค้ด

— โรเบิร์ตลองสัน
แหล่งที่มา
1
"SourceGraphic" หมายถึงอะไรที่นี่? "url (#solid)" ทำให้เกิดการเข้าถึงเว็บเพิ่มเติมหรือไม่
— Ben Slade
7
ข้อความไม่ชัดเจนที่นี่ :(
— teran
5
คุณสามารถให้พื้นหลังpadding ?
— vsync
2
ชอบวิธีแก้ปัญหานี้ในทางทฤษฎี แต่สามารถยืนยันได้ว่าข้อความไม่ชัดเจน ดูเหมือนว่าฟิลเตอร์จะทำลายการลบรอยหยัก
— paulmelnikow
2
เพิ่มoperator="xor"เพื่อfeCompositeป้องกันข้อความไม่ชัด @RobertLongson @teran @paulmelnikow @bill
— Saeid
20

วิธีแก้ปัญหาที่ฉันใช้คือ:

<svg>
  <line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
  <text x="150" y="105" style="fill:black">Hello World!</text>  
</svg>

กำลังวางรายการข้อความที่ซ้ำกันโดยมีแอตทริบิวต์เส้นขีดและความกว้างของเส้นโครงร่าง เส้นโครงร่างควรตรงกับสีพื้นหลังและความกว้างของเส้นขีดควรใหญ่พอที่จะสร้าง "เส้นกั้น" ที่จะเขียนข้อความจริง

แฮ็คเล็กน้อยและอาจมีปัญหา แต่ใช้ได้กับฉัน!

— dbarton_uk
แหล่งที่มา
1
ฉันพบว่าวิธีนี้ง่ายที่สุด
— Morgan Wilde
ยืนยันว่านี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุด
— scipper
นอกจากนี้ยังพิมพ์ได้อย่างสวยงามโดยที่โซลูชันฟิลเตอร์เบลอมากเมื่อพิมพ์
— David Hunt
18

ไม่คุณไม่สามารถเพิ่มสีพื้นหลังให้กับองค์ประกอบ SVG ได้ คุณสามารถทำมันด้วยโปรแกรมd3

var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
    .attr("x", bbox.x - padding)
    .attr("y", bbox.y - padding)
    .attr("width", bbox.width + (padding*2))
    .attr("height", bbox.height + (padding*2))
    .style("fill", "red");
— nnattawat
แหล่งที่มา
3
สิ่งนี้ไม่ได้ผล เพียงเปลี่ยนสีของข้อความไม่ใช่สีพื้นหลัง
— David J.
1
ใส่ข้อความในdivหรือspanและใช้การจัดรูปแบบตามที่คุณเคยใช้
— Arif Burhan
โพสต์นี้อธิบายได้ดี: cambridge-intelligence.com/…
— แลกเปลี่ยน
7

แทนที่จะใช้<text>แท็ <foreignObject>กคุณสามารถใช้แท็กซึ่งช่วยให้สามารถใช้เนื้อหา XHTML ด้วย CSS ได้

— คริส G
แหล่งที่มา
1
ฝากเป็นตัวอย่างได้ไหม
— IgniteCoders
1
คำตอบที่ไม่เหมาะสม developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObjectมีตัวอย่างที่เป็นประโยชน์ ภายใน ForeignObject ของคุณคุณสามารถใช้ divs & spans ร่วมกับนิยาม css ได้
— dr jerry
4

ตอบโดย Robert Longson (@RobertLongson) พร้อมการปรับเปลี่ยน: 

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

และเราไม่มีการเบลอและไม่มี "getBBox" ที่หนักหน่วง :) Padding มีให้โดยช่องว่างสีขาวในองค์ประกอบข้อความพร้อมตัวกรอง มันได้ผลสำหรับฉัน

— โรมันเบลอฟ
แหล่งที่มา
2

นี่คือแฮ็คที่ฉันชอบ (ไม่แน่ใจว่าควรใช้งานได้) มันอ้างถึงองค์ประกอบที่ยังไม่ปรากฏและทำงานได้ดี

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
    <defs>
        <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
            <feFlood flood-color="#00ffff"/>
        </filter>
    </defs>

    <!--Draw the text--> 
    <use xlink:href="#mygroup" filter="url(#removebackground)" />
    <g id="mygroup">
        <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>  
        <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> 
        <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> 
    </g>
</svg>
ขยายข้อมูลโค้ด

— คาลิเมโร 100582
แหล่งที่มา
2

คุณสามารถรวมตัวกรองกับข้อความได้

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter x="0" y="0" width="1" height="1" id="bg-text">
          <feFlood flood-color="white"/>
          <feComposite in="SourceGraphic" operator="xor" />
        </filter>
      </defs>
	  <!-- something has already existed -->
    <rect fill="red" x="150" y="20" width="100" height="50" />
    <circle cx="50"  cy="50" r="50" fill="blue"/>
      
      <!-- Text render here -->
      <text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
      <text fill="black" x="20" y="50" font-size="30">text with color</text>
    </svg>
  </body>
</html>
ขยายข้อมูลโค้ด

— Vu Phan
แหล่งที่มา
1

สำหรับผู้ที่สงสัยว่าจะใช้ padding กับองค์ประกอบข้อความอย่างไรเมื่อมีพื้นหลังเหมือนในคำตอบของ Robertให้ทำดังต่อไปนี้:

  <svg>
    <defs>
      <filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
        <feFlood flood-color="#171717"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>
    <text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
  </svg>

ในตัวอย่างข้างต้นกรองของxและy ที่ตำแหน่งที่สามารถใช้เป็นtransform: translate(-10%, -10%)จะและความกว้างและความสูงค่าสามารถอ่านได้และ120% 120%เราจึงทำให้พื้นหลังใหญ่ขึ้น 20% และหักล้างมัน -10% ดังนั้นพื้นหลังจึงใหญ่ขึ้น 10% ในแต่ละด้านของข้อความ

— momciloo
แหล่งที่มา
0

คำตอบก่อนหน้านี้อาศัยการเพิ่มข้อความเป็นสองเท่าและไม่มีช่องว่างที่เพียงพอ

โดยใช้atopและ&nbsp;ฉันสามารถได้รับผลลัพธ์ที่ฉันต้องการ

ตัวอย่างนี้ยังรวมถึงลูกศรซึ่งเป็นกรณีการใช้งานทั่วไปสำหรับป้ายข้อความ SVG: 

<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="white"></feFlood>
        <feComposite in="SourceGraphic" operator="atop"></feComposite>
    </filter>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>
<g id="garment">
    <path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
    <path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
    <use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
    <use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
    <path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
    <use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
    <path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
    <path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
    <line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
    <use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
    <g id="dimension-sleeve-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
    </g>
    <g id="dimension-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
    </g>
    <g id="dimension-sleeve-to-sleeve">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;130 cm&nbsp;</text>
    </g>
    <g title="Back Width" id="dimension-back-width">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;60 cm&nbsp;</text>
    </g>
</g>
</svg>
— แมวของเฮนรี่
แหล่งที่มา
-1

คุณสามารถเพิ่มสไตล์ให้กับข้อความของคุณ: 

  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px, 
     rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"

สีขาวในตัวอย่างนี้ ไม่ทำงานใน IE :)

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