SVG에서 텍스트의 배경색
css에서 text와 비슷한 svg의 배경을 채색하고 싶습니다.background-color
fill텍스트 자체에 색상을 지정하는 에 대한 문서 만 찾을 수있었습니다.
가능할까요?
불가능합니다. 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);
필터를 사용하여 배경을 생성 할 수 있습니다.
<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>아니요, 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");
내가 사용한 해결책은 다음과 같습니다.
<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>
획 및 획 너비 속성이있는 중복 텍스트 항목이 배치됩니다. 획은 배경 색상과 일치해야하며 획 너비는 실제 텍스트를 쓸 "분할"을 만들만큼 충분히 커야합니다.
약간의 해킹과 잠재적 인 문제가 있지만 나를 위해 작동합니다!
수정 사항이있는 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"도 없습니다. :) 필터가있는 텍스트 요소의 공백에 의해 패딩이 제공됩니다. 그것은 나를 위해 일했습니다
필터를 텍스트와 결합 할 수 있습니다.
<!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> 이것은 제가 가장 좋아하는 해킹입니다 (작동할지 확실하지 않음). 아직 표시되지 않은 요소를 참조하며 꽤 잘 작동합니다.
<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><text>태그 를 사용하는 대신 <foreignObject>태그를 사용하여 CSS로 XHTML 콘텐츠를 허용 할 수 있습니다.
텍스트에 스타일을 추가 할 수 있습니다.
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;"
White, in this example. Does not work in IE :)
참고URL : https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
'Programing' 카테고리의 다른 글
| Ruby의 File.open과 f.close의 필요성 (0) | 2020.09.13 |
|---|---|
| 현재 날짜를 밀리 초 단위로 가져옵니다. (0) | 2020.09.13 |
| 뷰가로드 될 때 AngularJS 초기화 코드 실행 (0) | 2020.09.13 |
| 단어와 바이트의 차이점은 무엇입니까? (0) | 2020.09.13 |
| AVFoundation, captureStillImageAsynchronouslyFromConnection시 셔터 소리를 끄는 방법은 무엇입니까? (0) | 2020.09.12 |