SVG에서 텍스트의 배경색

101

css에서 text와 비슷한 svg의 배경을 채색하고 싶습니다.background-color

fill텍스트 자체에 색상을 지정하는 에 대한 문서 만 찾을 수있었습니다.

가능할까요?

css  svg  background-color 
— 닉 지난 토
소스
지금까지 코드를 공유 할 수 있습니까?
— gotohales 2013 년
— gotohales
stackoverflow.com/questions/12260370/… 또한 필터를 사용하여이를 수행하는 방법을 보여줍니다.
— Erik Dahlström 2013 년
1
@RobertLongson 다른 질문보다 2 년 전에 질문을 받았을 때이 질문을 중복으로 닫는 것은 잘못된 것 같습니다. 특히 유일한 답변이 당신의 것일 때.
— Balthazar
@ Aperçu : 중복 대상을 선택할 때 질문의 연령은 주요 요소가 아닙니다 . 예를 들어 여기를 참조 하십시오 .
— 울려

답변:

93

불가능합니다. 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
소스
8
또는 텍스트에 svg 필터 (feFlood + feComposite)를 사용하십시오. 약간 비슷한 질문 stackoverflow.com/questions/12260370/…을 참조하십시오 .
— Erik Dahlström 2013 년
3
getBBox ()를 사용하는이 솔루션은 잘 작동하지만 많은 계산을 수행해야 할 때 매우 느릴 수 있습니다. svg 필터 (feFlood + feComposite)를 사용할 때의 문제는 텍스트가 약간 들쭉날쭉하게 나온다는 것입니다. 아래에 간단하지만 해키 한 솔루션을 제공했습니다.
— dbarton_uk
textElm = ctx.getElementById ( "the-text") 대신 textElm = document.getElementById ( "the-text")를 사용하는 것이 더 낫습니까?
— Simon Hi
nodeJS에서 동일한 getBBox 함수를 사용하는 방법
— 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 2015
7
텍스트 :( 여기 흐릿
— 테란
5
배경 패딩을 줄 수 있습니까 ?
— vsync
2
이론적으로이 솔루션을 좋아하지만 텍스트가 흐릿하다는 것을 확인할 수 있습니다. 필터가 앤티 앨리어싱을 깨는 것 같습니다.
— paulmelnikow
2
흐릿한 텍스트를 방지 operator="xor"하려면 feComposite에 추가하십시오 . @RobertLongson @teran @paulmelnikow @ 빌
— 압라 Zebardast
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
17

아니요, 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");
— Nattawat
소스
3
이것은 작동하지 않습니다. 배경색이 아닌 텍스트의 색상 만 변경합니다.
— David J.
1
묶 텍스트 A의 사업부 또는 범위를 마지막 두 당신이 사용했던 중에 스타일을 적용합니다.
— 아리프 Burhan입니다
이 게시물은 잘 설명합니다. cambridge-intelligence.com/…
— 교환
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"도 없습니다. :) 필터가있는 텍스트 요소의 공백에 의해 패딩이 제공됩니다. 그것은 나를 위해 일했습니다

— 로만 벨로 프
소스
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>
스 니펫 확장

— Calimero100582
소스
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

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에서 작동하지 않습니다. :)

— Jan Pi
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.