마스터 링 SVG ' s 스트로크-미터 라미트 속성

SVG의 stroke-miterlimit 속성, 그래픽 편집기에서 SVG를 내보낼 때 보았을 수도 있고, 시각적 효과가 삭제 된 후에도 어떤 식 으로든 변하지 않았다는 것을 알았을 수도 있습니다. 이 기사는이 SVG 속성을 깊이 탐구하고 stroke-linejoin 속성과의 연관성을 보여줍니다.

간단한 설명

stroke-miterlimit -Miterlimit)는 stroke-linejoin 에 따라 다릅니다. 연결에 round 또는 bevel 사용되면 stroke-miterlimit 선언 할 필요가 없습니다. 그러나 miter 사용하는 경우 기본값을 삭제하더라도 충분할 수 있습니다. 많은 그래픽 소프트웨어가 필요하지 않은 경우 에도이 속성을 추가한다는 점에 유의해야합니다.

stroke-linejoin 에 대한 자세한 설명

stroke-linejoin 속성은 경로의 모양 또는 코너의 기본 모양의 개요를 정의합니다. 교차로에서 두 줄의 코너 모양을 결정합니다. 이 속성은 5 가지 가능한 값을 허용하지만 그 중 2 개는 브라우저에서 구현되지 않으며 가능한 한 사양에 의해 식별됩니다. 다음은 지원되는 세 가지 값입니다.

• miter (기본값) : 두 줄은 급성 각도로 교차합니다.
• round : 코너가 둥글게되었습니다.
• bevel : 코너는 컷 코너와 비슷합니다.

stroke-miterlimit 상세한 설명

stroke-miterlimit 속성은 miter 코너를 생성 할 때 개요의 가장자리가 연장되는 거리를 정의합니다. 이 속성은 stroke-linejoin miter 로 설정된 경우에만 유효합니다.

stroke-miterlimit 값은 기본값이 4 인 양의 정수 일 수 있습니다. 값이 클수록 모서리 모양이 확장 될 수 있습니다.

속성 시너지

stroke-linejoin 및 stroke-miterlimit 함께 작동합니다. stroke-linejoin miter 로 설정되고 miter 길이가 스트로크 너비로 나뉘어지면 stroke-miterlimit 초과하면, miter bevel 로 변환됩니다.

다시 말해서:

 <code>[斜接长度] / [笔划宽度] > [stroke-miterlimit] = bevel [斜接长度] / [笔划宽度] </code>

miter 스트로크 너비를 초과 할 수없는 경우, miter 각도가되어야합니다.

설계 애플리케이션의 miter 제한 설정

많은 설계 응용 프로그램은 miter 연결 및 제한을 설정하는 방법을 제공합니다. 몇 가지 예는 다음과 같습니다.

Adobe Illustrator

Illustrator를 사용하면 경로의 스트로크를 구성 할 때 miter 값을 수정할 수 있습니다. 경로의 스트로크 설정에서 찾을 수 있습니다. "제한"값은 경로의 "네더"가 "미러 연결"으로 설정된 경우에만 설정할 수 있습니다.

일러스트 레이터의 기본 miter 한계는 사양에서 4가 아닌 10입니다. SVG 파일을 내보내거나 사본을 따르는 SVG 코드를 직접 내보낼 때 Illustrator는 miter 한계 값이 변경되지 않더라도 stroke-miterlimit="10" 추가합니다. Illustrator는 stroke-linejoin round 설정되어 있어도이 속성을 추가합니다. 해결책:

• 한계 값을 4로 설정하십시오.
• 벡터를 직접 저장하거나 복사하여 붙여 넣는 대신 내보내기 또는 화면 옵션으로 내보내기를 사용하십시오.

피그마

Figma에서는 모양 각도의 노드를 클릭하고 "스트로크"섹션의 3 점 아래에서 모서리가 연결된 장소를 찾을 수 있습니다. 기본적으로 Miter Angle 옵션이 나타나지만 연결이 miter 로 설정된 경우에만 나타납니다.

Figma는 소수점 값 대신 miter 각도를도 단위로 설정할 수 있습니다. 주목할만한 몇 가지 미묘한 점 :

• 기본 각도는 7.17 °이고 낮은 값을 설정할 수 없습니다. SVG를 내보낼 때 값은 태그에서 stroke-miterlimit='16' 이됩니다.
• 최대 값은 180 °입니다. 연결은 자동으로 bevel 로 전환됩니다.
• bevel 연결을 사용하여 내보낼 때 stroke-miterlimit 마지막 miter 각도가 활성화 될 때 값을 유지합니다.
• round 연결을 사용하여 내보낼 때 경로는 늘어나고 더 이상 스트로크가 없으며 색상을 채우는 경로입니다.

잉크 스케이프

Inkscape는 예상대로 일관된 방식으로 작동합니다. miter Connection을 선택할 때 기본값은 4입니다. 값이 기본값 인 경우, stroke-miterlimit 내보낸 SVG 코드에서 제외됩니다. 그러나 한계를 수정 한 후 bevel 또는 round 있는 경로가 내보내면 "제한"상자의 값이 기본값 4로 유지되지 않으면 stroke-miterlimit 코드로 돌아갑니다.

요약

특히 SVG 파일을 최적화 할 때 stroke-miterlimit 속성은 쉽게 간과됩니다. 작동 방식, stroke-linejoin 합동과 함께 작동 방식 및 miter 한계 값을 설정할 때 bevel 연결이 발생할 수있는 이유를 이해하면이 속성을 더 잘 사용하는 데 도움이됩니다.

위 내용은 마스터 링 SVG ' s 스트로크-미터 라미트 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!