SVG에서 마스크를 사용하여 잘못 정렬된 원형 컷아웃을 수정하는 방법은 무엇입니까?
2024년 11월 12일에 게시됨
검색:710
SVG를 사용하여 이미지에서 원형 섹션 잘라내기
이미지에서 원형 섹션을 잘라내기 위해 클립 경로를 사용하려는 현재 시도가 제대로 정렬되지 않습니다. 이 문제를 해결하기 위해 SVG에서 마스크를 사용하는 또 다른 접근 방식을 살펴보겠습니다.
이 코드는 배경이 분홍색으로 설정된 SVG를 생성합니다. defs 요소 내부에는 "hole"이라는 마스크를 정의합니다. 이 마스크는 두 개의 원으로 구성됩니다. 하나는 이미지에서 유지하려는 원형 영역을 나타내는 큰 흰색 원이고, 다른 하나는 컷아웃을 결정하는 작은 검정색 원입니다.
다음 요소는 "img"라는 패턴입니다. 이 패턴은 모양의 채우기로 사용하려는 이미지를 지정합니다. SVG 크기와 일치하도록 패턴의 크기를 설정하고 URL의 이미지를 사용합니다.
마지막으로 SVG의 전체 공간을 채우는 직사각형을 만듭니다. 직사각형의 채우기는 "img" 패턴을 참조하도록 설정되었으며 "구멍" 마스크를 적용하여 원형 섹션을 잘라냅니다.
릴리스 선언문
이 글은 1729664379에서 재인쇄되었습니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼
더>
-
C++에서 모든 Variadic 템플릿 인수에 대해 함수를 호출하는 방법은 무엇입니까?C 가변 템플릿: 모든 템플릿 인수에 대해 함수 호출C에서는 가변 템플릿 인수를 반복하고 호출과 같은 특정 작업을 수행하는 것이 종종 바람직합니다. 기능. 이는 다음 중 하나를 사용하여 달성할 수 있습니다:C 17 Fold Expression(f(args), ...);...프로그램 작성 2024년 11월 19일에 게시됨 -
`if` 문 너머: 명시적인 `bool` 변환이 있는 유형을 형변환 없이 사용할 수 있는 다른 곳은 어디입니까?형변환 없이 허용되는 bool로의 상황별 변환귀하의 클래스는 bool로의 명시적인 변환을 정의하여 해당 인스턴스 't'를 조건문에서 직접 사용할 수 있도록 합니다. 그러나 이 명시적인 변환은 다음과 같은 질문을 제기합니다. 캐스트 없이 't'...프로그램 작성 2024년 11월 19일에 게시됨
-
Go에서 파일을 효율적이고 간단하게 복사하는 방법은 무엇입니까?Go에서 효율적이고 간단한 파일 복사복잡한 라이브러리나 운영 체제 종속 코드에 의존하지 않고 Go에서 파일을 효율적으로 복사합니다. 다양한 엣지 케이스를 처리하는 강력한 구현을 사용하여 달성할 수 있습니다.빠른 속도를 위해 하드 링크 사용 복제기존 파일을 복제하는 가장...프로그램 작성 2024년 11월 19일에 게시됨
-
언제, 왜 JavaScript 변수 이름에 달러 기호를 사용해야 합니까?JavaScript에서 달러 기호의 역할 공개: 변수 명명 가이드JavaScript 영역에서는 달러 기호($)가 자주 사용됩니다. 변수 이름 옆에 나타나 초보 코더들의 호기심을 자극합니다. 왜 이 비밀스런 상징인가? 그냥 없애버릴 수 있을까요?두 기호의 이야기밑줄(_)...프로그램 작성 2024년 11월 19일에 게시됨
-
초기 C++11 초안에는 기본 이동 구현이 없는 이유는 무엇입니까?초기 C 11 초안에서 기본 이동 구현이 없는 이유는 무엇입니까?C 11 표준의 초기 버전에서는 이동 생성자와 할당 연산자의 암시적 생성이 토론 주제. 이로 인해 후속 초안이 변경되어 현재 사용 가능한 컴파일러에서 다음 동작이 발생했습니다.암시적 이동 의미 체계C 표준...프로그램 작성 2024년 11월 19일에 게시됨
-
Bootstrap 4 Beta의 열 오프셋은 어떻게 되었나요?Bootstrap 4 베타: 열 오프셋 제거 및 복원Bootstrap 4는 베타 1 릴리스에서 열 오프셋 방식에 중요한 변경 사항을 도입했습니다. 열이 오프셋되었습니다. 그러나 후속 베타 2 릴리스에서는 이러한 변경 사항이 취소되었습니다.offset-md-*에서 ml-...프로그램 작성 2024년 11월 19일에 게시됨
-
C#에서 Application.Restart()와 같은 Java 애플리케이션을 어떻게 다시 시작할 수 있습니까?Java 애플리케이션 다시 시작: 포괄적인 솔루션Java 애플리케이션을 다시 시작해야 할 필요성은 이벤트 핸들러가 다음과 같은 경우와 같은 다양한 시나리오에서 발생합니다. 재부팅을 시작하도록 트리거되었습니다. 이 기사에서는 C#의 Application.Restart()...프로그램 작성 2024년 11월 19일에 게시됨
-
Python 예외 처리에서 언제 If-Else 대신 Try-Except를 사용해야 합니까?예외 처리의 Try-Except와 If-ElsePython 프로그래밍에서는 try-Exception 블록 사용과 if 사이에 딜레마가 발생합니다. - 예외를 처리하는 else 문입니다. 두 접근 방식 모두 유효하지만 특정 시나리오에서는 try-Exception 사용을 ...프로그램 작성 2024년 11월 19일에 게시됨
-
jsPDF 문서에 CSS 스타일을 어떻게 적용할 수 있나요?jsPDF 관련 CSS 문제 해결jsPDF 문서에 CSS를 적용하는 데 문제가 있습니다. 이 가이드는 귀하가 제공한 정보를 기반으로 잠재적인 솔루션을 조사할 것입니다.CSS 포함 이해언급한 대로 귀하는 인라인, 내부 및 외부 스타일시트를 아무 소용없이 활용했습니다. 불...프로그램 작성 2024년 11월 19일에 게시됨
-
고유 ID를 유지하고 중복 이름을 처리하면서 PHP에서 두 개의 연관 배열을 어떻게 결합합니까?PHP에서 연관 배열 결합PHP에서는 두 개의 연관 배열을 단일 배열로 결합하는 것이 일반적인 작업입니다. 다음 요청을 고려하십시오.문제 설명:제공된 코드는 두 개의 연관 배열 $array1 및 $array2를 정의합니다. 목표는 두 배열의 모든 키-값 쌍을 통합하는 ...프로그램 작성 2024년 11월 19일에 게시됨
-
Python에서 절대 파일 경로를 어떻게 얻을 수 있습니까?Python에서 절대 파일 경로 결정프로그래머로서 파일의 절대 경로를 결정하는 것이 필수적인 경우가 많습니다. 절대 경로는 드라이브, 디렉터리 및 파일 이름을 포함하여 파일의 전체 주소를 제공합니다. Python에서는 절대 경로를 얻는 것이 간단하며 플랫폼 전반에서 일...프로그램 작성 2024년 11월 19일에 게시됨
-
Joda Time을 사용하여 날짜 문자열을 DateTime 객체로 어떻게 변환합니까?Joda Time을 사용하여 날짜 문자열을 DateTime 객체로 변환"04/02/2011 20:27과 같은 날짜 문자열을 변환하려고 할 때 :05"를 new DateTime("04/02/2011 20:27:05")을 사용하여 Dat...프로그램 작성 2024년 11월 19일에 게시됨
-
PHP에서 다차원 배열을 1차원 배열로 평면화하는 방법은 무엇입니까?다차원 배열을 1차원 배열로 변환: PHP 솔루션PHP에서 단일 요소 배열이 포함된 배열을 만나면 변환이 발생할 수 있습니다. 1차원 등가물을 얻으려고 할 때 도전합니다. 이 시나리오를 해결하기 위해 내장된 PHP 기능을 사용하여 이러한 배열을 효율적으로 평면화하는 방...프로그램 작성 2024년 11월 19일에 게시됨
-
역참조 없이 Go에서 반복 문자를 일치시키는 방법은 무엇입니까?Go에서 정규 표현식을 사용하여 반복되는 문자를 일치시키는 방법은 무엇입니까?이 기사에서는 다음과 같은 문자를 일치시키는 문제를 다룰 것입니다. Go에서 정규 표현식을 사용하여 두 번 반복합니다. 이 작업은 단순히 역참조를 사용하여 반복 문자와 일치시킬 수 있는 Jav...프로그램 작성 2024년 11월 19일에 게시됨
-
PDO 쿼리 오류를 디버깅하는 방법: "최종" 쿼리를 재구성할 수 있습니까?PDO 쿼리 오류의 수수께끼를 파헤치는 방법기존 PHP 연결 SQL 쿼리를 사용하면 수동 쿼리를 통해 구문 오류 디버깅을 쉽게 수행할 수 있습니다. 실행 시 준비된 PDO 문의 출현으로 인해 눈에 보이는 "최종" 쿼리 문자열이 없다는 독특한 문제가 발...프로그램 작성 2024년 11월 19일에 게시됨
중국어 공부
- 1 "걷다"를 중국어로 어떻게 말하나요? 走路 중국어 발음, 走路 중국어 학습
- 2 "비행기를 타다"를 중국어로 어떻게 말하나요? 坐飞机 중국어 발음, 坐飞机 중국어 학습
- 3 "기차를 타다"를 중국어로 어떻게 말하나요? 坐火车 중국어 발음, 坐火车 중국어 학습
- 4 "버스를 타다"를 중국어로 어떻게 말하나요? 坐车 중국어 발음, 坐车 중국어 학습
- 5 운전을 중국어로 어떻게 말하나요? 开车 중국어 발음, 开车 중국어 학습
- 6 수영을 중국어로 뭐라고 하나요? 游泳 중국어 발음, 游泳 중국어 학습
- 7 자전거를 타다 중국어로 뭐라고 하나요? 骑自行车 중국어 발음, 骑自行车 중국어 학습
- 8 중국어로 안녕하세요를 어떻게 말해요? 你好중국어 발음, 你好중국어 학습
- 9 감사합니다를 중국어로 어떻게 말하나요? 谢谢중국어 발음, 谢谢중국어 학습
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
