일러스트레이션 파일을 colorable/fillable SVG로 보냅니다.

Question

현재 클라이언트의 색상 페이지에서 작업 중입니다. 다른 기관이 흑백 드로잉이 포함 된 Illustrator 파일을 나에게 보냅니다. 다른 색상으로 '그리는'가능성을 만드는 것은 자바 스크립트 (jQuery) 및 캔버스를 사용하여 그렇게 어렵지 않습니다.

그러나 "특정 색상으로 전체 영역을 채우기"-tool을 만드는 무언가를 찾고 있습니다. 내가 SVG 파일을 만들 수있는 벡터 파일을 사용하여 선택된 색상으로 SVG 클릭 한 영역을 채우기 위해 자바 스크립트 함수를 만들 수있을 것 같아요 -하지만 일부 줄 연결되어 있지 않기 때문에 그림을 파하지 않을까 두렵다 '올바른 방법으로'.

특정 색상으로 이미지 (또는 SVG)를 채울 방법이 있습니까? 사이에 ? 그리고 그렇지 않다면; 아무도 비슷한 결과를주는 비슷한 것을 알고 있습니까?

내 질문이 분명하기를 바랍니다. 영어가 완벽하지는 않습니다. 도움을 많이 받으실 수 있습니다! SVG와

Answer 1

~ 프랭크, 당신은 정말에만 실제 모양에 fill 속성을 적용 할 수 있습니다. "색칠"하고자하는 영역이 모양이 아닌 경우 채우기를 적용 할 영역을 만들어야합니다. 100 % 불투명도 만 사용하는 경우 (특정 그래픽에 따라) 더미 사각형을 만들어 다른 모양 뒤에 배치하는 것이 쉽습니다. 그런 다음이 직사각형을 채울 수 있습니다. (참고 : SVG는 z-index을 지원하지 않으므로 사각형을 다른 모양 뒤에 배치하려면 문서의 다른 모양보다 먼저 삽입해야합니다.

Answer 2

순수 SVG를 사용하려면 연결된 모양으로 구성되어 있습니다 (귀하가 발견 한대로).

그런 식으로 그림을 만들 수 없다면 SVG를 캔버스로 렌더링하고 구식의 "홍수"가 채워져 모양을 채울 수 있습니다. 캔버스에 렌더링하는 방법의 예는 다른 질문에서 찾을 수 있습니다. 홍수 채우기는 예제 코드를 찾는 데 어려움이 없어야하는 쉬운 기술입니다.