C#을 사용하여 SVG에서 채우기 및 획

SVG(Scalable Vector Graphics)는 XML 기반의 웹 친화적인 벡터 파일 형식입니다. 웹 페이지에 시각적 정보를 표시하는 데 사용됩니다. SVG 이미지는 이미지 품질을 변경하지 않고 확장 가능합니다. 이 기사에서는 C#을 사용하여 SVG에서 채우기 및 획으로 작업하는 방법을 배웁니다.

이 기사에서는 다음 주제를 다룹니다.

SVG의 채우기 및 획을 위한 C# API
SVG 채우기란?
SVG 스트로크란?
SVG의 획 및 채우기
SVG에서 원 채우기 및 획
SVG의 채우기 및 획 경로
스타일을 사용하여 칠 및 획 적용

SVG에서 채우기 및 획을 사용하는 C# API

C#에서 SVG의 채우기 및 획 속성을 사용하려면 Aspose.SVG for .NET API를 사용합니다. 소프트웨어 종속성 없이 SVG 파일을 로드, 구문 분석, 렌더링, 생성 및 인기 형식으로 변환할 수 있습니다.

API의 SVGDocument 클래스는 SVG 계층 구조의 루트를 나타내며 전체 콘텐츠를 보유합니다. 이 클래스의 Save() 메서드를 사용하면 SVG를 지정된 파일 경로에 저장할 수 있습니다. QuerySelector() 메서드는 선택기와 일치하는 문서의 첫 번째 요소를 반환합니다. API는 사각형, 원, 타원, 선, 폴리라인 등과 같은 인기 있는 모양 작업을 지원합니다. API는 원의 경우 SVGCircleElement, 다각형의 경우 SVGPolygonElement 등과 같이 지원되는 모양을 나타내는 별도의 클래스를 제공합니다.

API의 DLL 다운로드 또는 NuGet을 사용하여 설치하십시오.

PM> Install-Package Aspose.SVG

SVG 채우기란 무엇입니까?

채우기 속성은 윤곽선 내부의 모양 색상을 설정하는 데 사용되는 기본 SVG 프레젠테이션 속성 중 하나입니다.

다음 채우기 속성을 정의할 수 있습니다.

채우기: 채울 색상을 설정합니다. 채우기가 없으면 none 또는 transparent를 지정합니다.
채우기 불투명도: 불투명도 값을 0에서 1 사이로 설정합니다.
fill-rule: 0이 아닌 evenodd와 같이 모양의 내부 영역이 결정되는 방식을 정의합니다.

SVG 스트로크란 무엇입니까?

stroke 속성은 SVG 모양의 외곽선 또는 테두리를 정의합니다. 획 표시 속성은 모양의 윤곽선 색상을 설정합니다.

다음과 같은 획 속성을 설정할 수 있습니다.

스트로크: 색상 값을 설정합니다.
stroke-dasharray: 점선 유형을 지정합니다.
스트로크 대시 오프셋
stroke-linecap: butt, square, round와 같은 선의 끝 모양을 제어합니다.
stroke-linejoin: 마이터, 베벨 및 라운드와 같이 두 개의 선이 결합되는 방식을 지정합니다.
stroke-miterlimit: 사용되는 경우 1보다 크거나 같아야 합니다.
stroke-opacity: 불투명도 값을 0에서 1 사이로 설정합니다.
획 너비: 너비를 설정합니다.

SVG의 채우기 및 선

채우기와 획 모두 SVG의 그래픽에 색상, 그라디언트 또는 패턴을 추가하는 데 사용됩니다. 채우기는 SVG 요소의 내부를 그리는 반면 획은 윤곽선을 그립니다. 스타일 속성에서 채우기와 획을 모두 지정하거나 프레젠테이션 속성으로 사용할 수 있습니다.

아래와 같이 style 속성에서 SVG 채우기 및 SVG 스트로크를 설정할 수 있습니다.

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

아래와 같이 프레젠테이션 속성에서 동일한 스타일 속성을 사용할 수도 있습니다.

stroke="green" stroke-width="2" fill="#ff0000"

SVG 색상을 지정하기 위해 빨강, 파랑 등과 같은 색상 이름을 사용할 수 있습니다. 색상에 대해 RGB 값 또는 HEX 값을 사용할 수도 있습니다.

C#의 채우기 및 획 원

아래 단계에 따라 원의 SVG 채우기 및 SVG 획 속성을 설정할 수 있습니다.

먼저 SVGDocument 클래스를 사용하여 기존 SVG를 로드합니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 QuerySelectorAll() 메서드를 사용하여 모든 원 요소를 찾습니다.
그런 다음 선택한 SVGCircleElement에 대한 채우기 속성을 설정합니다.
선택적으로 선택한 SVGCircleElement에 대한 획 속성을 설정합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 SVG의 원 요소에 대해 채우기 및 획을 설정하는 방법을 보여줍니다.

// 이 코드 예제에서는 C#에서 SVG의 circle 요소에 대한 채우기 및 획 특성을 설정하는 방법을 보여줍니다.
// 기존 SVG 이미지 로드
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// 문서의 루트 SVG 요소 가져오기
var svgElement = document.RootElement;

// g 요소의 모든 원 요소 찾기
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// 첫 번째 원 요소 가져오기
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// 채우기 속성 설정
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// 획 속성 설정
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// SVG 저장
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

CSharp에서 채우기 및 스트로크 원 — C#에서 원 요소의 채우기 및 획을 설정합니다.

Circle.svg 이미지의 내용은 아래를 참조하십시오.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

다음은 Fill-Circle.svg 이미지의 내용입니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

C#의 채우기 및 획 경로

다음 단계에 따라 SVG의 경로 요소에 대해 SVG 채우기 및 SVG 획 속성을 설정할 수 있습니다.

먼저 SVGDocument 클래스를 사용하여 기존 SVG를 로드합니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 QuerySelector() 메서드를 사용하여 경로 요소를 가져옵니다.
그런 다음 선택한 SVGPathElement에 대한 채우기 속성을 설정합니다.
선택적으로 선택한 SVGPathElement에 대한 획 속성을 설정합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 SVG의 경로 요소에 대해 채우기 및 획을 설정하는 방법을 보여줍니다.

// 이 코드 예제에서는 C#에서 SVG의 경로 요소에 대한 채우기 및 획 특성을 설정하는 방법을 보여줍니다.
// 기존 SVG 이미지 로드
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// 문서의 루트 SVG 요소 가져오기
var svgElement = document.RootElement;

// 첫 번째 경로 요소 가져오기
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// 채우기 속성 설정
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// 획 속성 설정
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// SVG 저장
document.Save(@"C:\Files\SVG\Fill-Path.svg");

CSharp의 채우기 및 획 경로 — C#에서 경로 요소에 대한 채우기 및 획을 설정합니다.

Sample-Path.svg 이미지의 내용은 아래를 참조하십시오.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

아래에서 Fill-Path.svg 이미지의 내용을 찾으십시오.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

C#에서 스타일을 사용하여 채우기 및 획 적용

아래 단계에 따라 CSS 스타일 속성을 사용하여 SVG 채우기 및 SVG 획 속성을 적용할 수도 있습니다.

먼저 SVGDocument 클래스의 인스턴스를 만듭니다.
다음으로 문서의 루트 요소를 가져옵니다.
그런 다음 CreateElementNS() 메서드를 사용하여 circle 요소를 만듭니다.
다음으로 Cx, Cy, R과 같은 원의 기본 속성을 설정합니다.
그런 다음 SetAttribute() 메서드를 사용하여 스타일 속성을 적용합니다.
그런 다음 AppendChild() 메서드를 사용하여 자식을 추가합니다.
마지막으로 Save() 메서드를 사용하여 출력 SVG 이미지를 저장합니다.

다음 코드 샘플은 C#에서 CSS 스타일을 사용하여 채우기 및 획을 적용하는 방법을 보여줍니다.

// 이 코드 예제에서는 C#에서 CSS 스타일을 사용하여 채우기 및 획 특성을 적용하는 방법을 보여줍니다.
// 새 SVG 만들기
using (var document = new SVGDocument())
{
    // 문서의 루트 SVG 요소 가져오기
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // 원 추가
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // 스타일 속성 설정
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // 루트 요소에 원 추가
    svgElement.AppendChild(circle);
    
    // SVG 저장
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

스타일 인 CSharp를 사용하여 채우기 및 획 적용 — CSS 스타일을 사용하여 채우기 및 획 적용

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

무료 임시 라이센스 받기

평가 제한 없이 Aspose.SVG for .NET을 사용해 볼 수 있는 무료 임시 라이선스 받기입니다.

결론

이 문서에서는 다음 방법을 배웠습니다.

새 SVG 이미지를 만듭니다.
기존 SVG 이미지를 로드합니다.
SVG 이미지를 편집하십시오.
SVG의 모양에 대한 채우기 및 획 속성을 설정합니다.
C#의 모양에 대한 스타일 속성을 설정합니다.

또한 문서에서 Aspose.SVG for .NET에 대해 자세히 알아보고 API에서 지원하는 다양한 기능을 탐색할 수 있습니다. 모호한 점이 있는 경우 포럼에서 언제든지 문의하십시오.

또한보십시오

C#에서 프로그래밍 방식으로 SVG 색상 또는 배경 변경

SVG에서 채우기 및 획을 사용하는 C# API#

SVG 채우기란 무엇입니까?#

SVG 스트로크란 무엇입니까?#

SVG의 채우기 및 선#

C#의 채우기 및 획 원#

C#의 채우기 및 획 경로#

C#에서 스타일을 사용하여 채우기 및 획 적용#

무료 임시 라이센스 받기#

결론#

또한보십시오#