6 일반적인 SVG 실패 (및 수정 방법)

나는 최근에 인라인 svg를 디버그하는 방법을 물었다. DOM의 일부이기 때문에 모든 브라우저의 DevTools에서 인라인 SVG를 확인할 수 있습니다. 이로 인해 우리는 사물을 확장하고 SVG 최적화를위한 잠재적 인 문제 나 기회를 발견 할 수있었습니다.

그러나 때로는 SVG를 전혀 볼 수 없습니다. 이 경우 디버깅 할 때 6 가지 특정 측면을 찾습니다.

> 1 SVG를 사용할 때 ViewBox는 일반적인 혼란입니다. 기술적으로, 뷰 박스없이 인라인 SVG를 사용해도 괜찮지 만 컨테이너로 스케일링하는 가장 중요한 장점 중 하나를 잃습니다. 동시에, 부적절하게 구성된 경우, 우리에게 해로울 수있어 예상치 못한 자르기가 발생할 수 있습니다.

요소가 자르면 거기에 있습니다. 그들은 우리가 볼 수없는 좌표계의 일부일뿐입니다. 그래픽 편집 프로그램에서 파일을 열면 다음과 같습니다. 가장 쉬운 솔루션은 무엇입니까? 스타일 시트, 인라인 스타일 속성으로 또는 속성을 나타내는 SVG로서 SVG에

를 추가하십시오. 그러나 SVG에 배경색을 적용하거나 주변에 다른 요소가 있으면 상황이 조금 잘못 보일 수 있습니다. 이 경우 가장 좋은 옵션은 뷰 박스를 편집하여 숨겨진 좌표 시스템 부분을 표시하는 것입니다. viewbox에 대해서는 논의 할 가치가있는 몇 가지가 있습니다. viewbox는 어떻게 작동합니까?

SVG는 무한 캔버스이지만 뷰포트 및 뷰 박스를 통해 우리가 보는 것과 그것을 어떻게 보는지 제어 할 수 있습니다.

viewport

는 무한 캔버스의 창 프레임입니다. 그 치수는

및

속성에 의해 정의되거나 CSS에서 해당

및

속성을 ​​사용하여 정의됩니다. 우리는 원하는 길이의 모든 단위를 지정할 수 있지만 단위가없는 숫자를 제공하면 기본값으로 픽셀을 제공합니다.

viewbox overflow="visible"는 네 값으로 정의됩니다. 첫 번째 두 개는 왼쪽 상단 코너의 출발점입니다 (x 및 y 값, 음수가 허용됨). 나는 이것들을 편집하여 권장합니다. 마지막 두 가지는 뷰포트에서 좌표계의 너비와 높이입니다. 여기서는 그리드의 스케일을 편집 할 수 있습니다 (스케일링 섹션에서 논의 할 것입니다).

다음은 SVG Viewbox를 나타내는 단순화 된 마커와

: 에 설정된 속성을 보여줍니다.

remophoud <:> 그래서, 이것은 :

우리가 보는 뷰포트는 x 축에서 0, y 축에서 0이 교차하는 곳에서 시작됩니다. <:>이 내용을 변경하십시오

아래 비디오에서 는 SVG에 빨간색

를 추가했으며, 중앙은 x 축의 300 포인트, y 축에서는 200 점을 추가했습니다. 뷰 박스 좌표를 동일한 값으로 변경하면 원의 배치가 프레임의 왼쪽 상단 모서리로 변경되는 반면 SVG의 렌더링 크기는 동일하게 유지됩니다 (700 × 700). 내가 한 것은 ViewBox와 함께 "recompose"였습니다. <circle></circle> ZOOM

뷰 박스의 마지막 두 값을 변경하여 이미지를 확대하거나 축소 할 수 있습니다. 값이 클수록 SVG 장치가 뷰포트에 더 많이 추가되어 이미지가 더 작습니다. 1 : 1 비율을 유지하려면 뷰 박스 너비와 높이가 뷰포트 너비와 높이 값과 일치해야합니다.

Illustrator에서 이러한 매개 변수를 변경할 때 어떤 일이 발생하는지 보자. Artboard는 700 픽셀 흰색 사각형으로 표시되는 뷰포트입니다. 이 영역 외부의 모든 것은 무제한 SVG 캔버스이며 기본적으로 자릅니다.

다음 그림 1은 x 축에서 900, y 축에서 900에 위치한 파란색 점을 보여줍니다. 마지막 두 뷰 박스 값을 700에서 900으로 변경하면 다음과 같이 표시됩니다.

메쉬가 뷰포트에 맞게 어떻게 스케일링하는지에 대한 증거로 분홍색 정사각형이 있습니다. 장치가 더 작아지고 더 많은 메쉬 라인이 동일한 뷰포트 영역에 맞습니다. 아래 펜에서 동일한 값을 사용하여 작동 방식을 확인할 수 있습니다. > 2. 누락 너비와 높이

인라인 SVG를 디버깅 할 때 내가 보는 또 다른 일반적인 질문은 또는

속성이 태그에 포함되어 있는지 여부입니다. 대부분의 경우 SVG가 절대 위치 또는 유연한 컨테이너가있는 컨테이너 내부에 있지 않는 한 큰 문제는 아닙니다 (Safari는 자동 대신 0px를 사용하여 SVG 폭 값을 계산하기 때문입니다). 이 경우 너비 또는 높이를 제외하면이 코드 펜 데모를 열고 Chrome, Safari 및 Firefox에서 비교하여 보았 듯이 전체 이미지를 볼 수 없습니다 (더 큰보기를보기 위해 이미지를 클릭하면).

솔루션? 표현 속성, 인라인 스타일 속성 또는 CSS의 너비 또는 높이를 추가하십시오. 특히

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

또는 로 설정된 경우 높이 만 사용하지 마십시오. 또 다른 해결책은

및 다음 펜으로 시도하고 다른 옵션을 결합 할 수 있습니다.

> 3. 의도하지 않은 채우기 및 스트로크 컬러

인라인 스타일이든 CSS에서

태그에 색상을 적용하고있을 수도 있습니다. 이것은 좋지만 태그 나 스타일에 의 색상과 충돌하는 다른 색상 값이있을 수 있습니다. 일부 컨텐츠는 보이지 않습니다.

이것이 내가 SVG의 태그에서 및

속성을 ​​찾아서 삭제하는 경향이있는 이유입니다. 다음 비디오는 CSS를 빨간 채우기로 스타일로 한 SVG를 보여줍니다. SVG에는 패딩이 마커의 흰색으로 직접 채워지는 곳이 있으며, 누락 된 부분을 보여주기 위해 제거했습니다. fill > 4 이것은 매우 분명해 보일지 모르지만, 내가 얼마나 자주 일어나고 있는지 보는 것에 놀랄 것입니다. 우리가 Illustrator에서 SVG 파일을 만들고 파일을 내보낼 때 멋진 일치 ID를 얻을 수 있도록 레이어의 이름을 지정하기 위해 매우 열심히 노력했다고 가정 해 봅시다. 이 ID에 연결하여 CSS에서 SVG를 스타일링 할 계획이라고 가정 해 봅시다. stroke 이것은 좋은 방법입니다. 그러나 두 번째로 동일한 위치로 동일한 SVG 파일을 볼 때 여러 번 있으며, 일반적으로 벡터를 직접 복사/붙여 넣을 때 ID가 다릅니다. 새 레이어가 추가되었거나 기존 레이어 중 하나가 이름이 바뀌거나 다른 이름이 바뀌었을 수도 있습니다. 어쨌든 CSS 규칙은 더 이상 SVG 태그의 ID와 일치하지 않으므로 SVG가 예상과 다르게 렌더링됩니다.

큰 SVG 파일에서 이러한 ID를 찾는 데 어려움이있을 수 있습니다. 이것은 DevTools를 열고 작동하지 않는 그래프 섹션을 확인하고 해당 ID가 여전히 일치하는지 확인하기에 좋은시기입니다.

따라서 코드 편집기에서 내보내기 SVG 파일을 열고 컨텐츠를 교환하기 전에 원본 파일과 비교하는 것이 좋습니다. Illustrator, Figma 및 Sketch와 같은 응용 프로그램은 똑똑하지만이를 검토 할 책임이 없다는 것은 아닙니다.

자르기 및 마스킹을위한 > 5 SVG가 실수로 자르고 뷰 박스가 올바르게 확인되면 일반적으로 이미지를 방해 할 수있는 CSS의

또는 속성을 ​​살펴 봅니다. 인라인 마커를보고 싶은 유혹이지만 SVG의 스타일이 다른 곳에서 일어날 수 있다는 것을 기억하는 것이 가장 좋습니다.

CSS 자르기 및 마스킹을 통해 이미지 또는 요소의 일부를 "숨길"수 있습니다. SVG에서 는 중간 결과없이 이미지의 일부를 자르는 벡터 작업입니다. 라벨은 투명성, 반투명 효과 및 흐릿한 모서리를 허용하는 픽셀 작업입니다.

자르기 및 마스킹과 관련된 디버깅 상황에 대한 작은 체크리스트가 있습니다.

클리핑 경로 (또는 마스크)와 그림이 서로 겹쳐 지도록하십시오. 겹치는 부분은 표시된 부분입니다.
• 그래프와 교차하지 않는 복잡한 경로가있는 경우 변환이 일치 할 때까지 변환을 적용하십시오.
• 또는
또는
• 가 렌더링되지 않더라도 DevTools를 사용하여 내부 코드를 확인할 수 있으므로 사용할 수 있습니다! <clippath></clippath> <mask></mask> 마크를 및 로 복사하여 태그를 닫기 전에 붙여 넣습니다. 그런 다음이 모양에 패딩을 추가하고 SVG의 좌표와 치수를 확인하십시오. 여전히 이미지가 표시되지 않으면 태그에 를 추가하십시오.
• 는 가 고유 한 <svg></svg> overflow="hidden" 또는 사이의 마크에서 오타를 점검하십시오. ,
,
• , <clippath></clippath> 또는 <mask></mask> 내의 요소에 적용되는 다른 스타일은 쓸모가 없습니다. 유용한 유용한 부분은 이러한 요소의 채우기 영역 구조입니다. 그렇기 때문에 를 사용하는 경우 처럼 행동하고 를 사용하면 자르기 효과가 표시되지 않습니다.
• 를 적용한 후 이미지가 표시되지 않으면 마스크 내용이 완전히 검은 색이 아닌지 확인하십시오. 마스크 요소의 밝기는 최종 그림의 불투명도를 결정합니다. 어두운 부분은 이미지의 내용을 숨기고 더 밝은 부분을 통해 볼 수 있습니다. <clippath></clippath> <mask></mask> 이 ​​펜에서 마스크와 자르기 요소를 사용하여 연습 할 수 있습니다. > 6. 네임 스페이스 SVG가 XML 기반 마크 업 언어라는 것을 알고 있습니까? 예, 그것은! SVG의 네임 스페이스는
속성에 설정되어 있습니다.
• XML의 네임 스페이스에 대해 알아야 할 것이 많으며 MDN의 시작에 대한 좋은 소개가 있습니다. 네임 스페이스는 브라우저에 SVG 특정 태그를 지정하도록 컨텍스트를 제공한다고 말할 수 있습니다. 아이디어는 동일한 파일 (예 : SVG 및 XHTML)에 여러 유형의 XML이있을 때 네임 스페이스가 충돌을 방지하는 데 도움이된다는 것입니다. 이는 현대식 브라우저에서 덜 일반적인 문제이지만 문서 유형 및 네임 스페이스를 정의 할 때 이전 브라우저 또는 Gecko와 같은 브라우저의 엄격한 SVG 렌더링 문제를 설명하는 데 도움이 될 수 있습니다. <clippath></clippath> SVG 2 사양에는 HTML 구문을 사용할 때 네임 스페이스가 필요하지 않습니다. 그러나 레거시 브라우저를 지원하는 것이 최우선 과제라면, 이는 중요합니다. 추가해도 손상이 발생하지 않습니다. 이런 식으로, 요소의 fill 속성을 ​​정의 할 때, 그 드문 경우에는 충돌이 없을 것입니다. stroke

  <svg height="700" viewbox="0 0 700 700" width="700"></svg>

  CSS에서 인라인 SVG를 사용할 때 동일합니다 (예 : 배경 이미지로 설정). 다음 예에서는 성공적인 확인 후 체크 마크 아이콘이 입력 상자에 나타납니다. CSS의 모양은 다음과 같습니다

  배경 속성의 SVG 내부의 네임 스페이스를 삭제하면 이미지가 사라집니다.

  또 다른 일반적인 네임 스페이스 접두사는 입니다. 패턴, 필터, 애니메이션 또는 그라디언트와 같은 SVG의 다른 부분을 참조 할 때 종종 사용합니다. SVG 2 이후 다른 하나가 더 이상 사용되지 않았으므로

  로 교체하는 것이 좋습니다. 그러나 이전 브라우저와 호환성 문제가있을 수 있습니다. 이 경우 둘 다 사용할 수 있습니다. 여전히

  <svg viewbox="0 0 700 700"></svg>

  를 사용하고 있다면 네임 스페이스

  를 포함하십시오.

  SVG 기술을 향상시킵니다!

  당신이 자신이 잘못된 렌더링 된 Inline SVG를 문제 해결하는 것을 발견하면,이 팁이 많은 시간을 절약 할 수 있기를 바랍니다. 이것들은 내가 찾고있는 것입니다. 어쩌면 당신은주의를 기울일 다른 붉은 깃발이있을 것입니다 - 그렇다면 의견에 알려주십시오! xlink:href 가장 중요한 것은 SVG를 사용하는 다양한 방법을 기본적으로 이해하는 것이 좋습니다. Codepen Challenge에는 종종 SVG가 포함되며 모범 사례를 제공합니다. 수준을 향상시키기위한 더 많은 리소스는 다음과 같습니다. href xlink:href SVG, CSS3 및 HTML5 xmlns:xlink="http://www.w3.org/1999/xlink" (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey)를 사용하여 SVG 성경이라고 생각합니다.

  Lea Verou는 광범위한 SVG 지식을 가지고 있으며이 주제에 대한 강의를 여러 번 제공했습니다 (예 : Frontend United 2019 의이 비디오).

  SVG 애니메이션 (Sarah Drasner) SVG Essentials

  (Amelia Bellamy-Royds, J. David Eisenberg) 실용적인 svg

  (Chris Coyier)

  나는 svg와 관련된 훌륭한 사람들에게주의를 기울일 것을 제안합니다 :

  Sara Soueidan
  • Carl Schoof Cassie Evans val head ana tudor

위 내용은 6 일반적인 SVG 실패 (및 수정 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!