그래프가있는 직사각형 곡선

Question

그래프가있는 150 폭 x 4 높이의 직사각형 모양을 그리는 방법과 그래프를 사용하여 세트로 그룹화하는 방법을 알고 싶습니다. 기본적으로 멋진 곡선을 그릴 필요가 있지만, ("")을 사용하여 그것을 수행하는 방법을 설명합니다. http://jsfiddle.net/creativestudio/K3B3r/2/

Answer 1

저는 Raphael과 협력하여 요청한 것처럼 독특한 모양을 만들어야했습니다. 불행히도, 모양이 기본 내장되어 있지 않으면 raphael.path()를 사용해야합니다.

이 경로를 만드는 것은 약간의 악몽 일 수 있지만 도움을 받으려면 svg 편집기를 사용하여 경로 문자열을 만드는 것이 좋습니다. Adobe Illustrator를 사용하고 내 모양을 그려 svg 파일로 저장 한 다음 텍스트 편집기에서 해당 svg 파일을 열고 경로 문자열 (path 태그의 "d"속성)을 꺼냅니다. "m"또는 "M"으로 시작하는 첫 번째 좌표로 재생해야 할 수도 있습니다 (소문자 m은 상대적인 시작점이며, 대문자는 절대적으로 믿을 수 있습니다). 그리고 svg의 컨텍스트에서 모양이 시작될 위치를 조정하십시오 영상. 약간의 흔적과 오류입니다.

Adobe Illustrator가없는 경우 Inkscape와 같은 무료 프로그램을 사용하거나 다음과 같은 온라인 svg 편집기를 사용할 수도 있습니다. http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html (경로를 잡으려면 왼쪽 상단의 "소스 편집"버튼을 선택하십시오.)

또한, 나는 여기에 SVG 경로 요소에 대한 사양을 확인합니다 : http://www.w3.org/TR/SVG/paths.html#PathElement

죄송이 아니 가장 쉬운 방법,하지만 정말에만 창의력을하지 않는 (는 "미소"모양을 달성하기위한 방법 및 레이어입니다 서로 위에 2 개의 원이 있지만 1 개의 원이 배경으로 희미 해져야합니다. 귀하의 경우에는 매우 어렵게 만드는 그라디언트입니다.