다중 색상 SVG 폴리 라인

자바 스크립트가있는지도 위에지도 데이터를 SVG 형식으로 그리는 데 리플릿을 사용하고 있습니다. 나는 일련의 수천 개의 좌표를 가지고 있는데, 여기에서 전단 경로 (L.Browser.svg를 확장)를 그립니다.다중 색상 SVG 폴리 라인

제 3의 변수 (이 코드는 고도, 파란색이 낮고 빨간색이 높거나 그런 식으로되어 있기 때문에)로 코드를 색칠하고 싶습니다. 저는 SVG를 처음 접했지만 전체 경로에 대해서만 획 색상을 설정할 수있는 것처럼 보입니다.

예.

// create the SVG group and path element 
this._container = this._createElement('g'); 
this._path = this._createElement('path'); 
// set the stoke color -- I wish I could make this dynamic per segment! 
this._path.setAttribute('stroke', '#00000'); 

// Not real code, but simplified...generate lots of coordinates for the polyline 
var myPath = "M" + p.x + "," + p.y + " L"; 
points.each(function(item, index){ 
    poly += item.x + "," + item.y + " ";      
}); 

// update 
this._path .setAttribute('d', poly);

이를보다 경로 요소의 수천을 생성하고 SVG 그룹에 추가 할 수있는 더 좋은 방법이 있나요, 각 : - 내가 지금 가지고있는 라인은 하나의 색상 (단순화를 위해 옷을 벗었 개념 코드)입니다 자기 뇌졸중 색이야?

출처

2013-02-06 user690750

이것을 달성하는 방법이 있지만 많은 작업이기도합니다. 적절한 색상 코드 (something like this)을 가진 완전한 이미지가있는 경우 SVG 필터를 사용하여 해당 이미지를 패스와 합성 할 수 있습니다 즉석 패스 색상입니다. 같은 효과를 내기 위해 SVG 마스크를 사용할 수도 있습니다. 그 이미지가 없다면 SVG에서 이미지를 만들 수는 있지만 비슷한 양의 작업이 될 것입니다.

출처

2013-02-06 16:56:00

이미지가 없습니다. 나는 X Point, Y point, color의 배열을 가지고있다. 도움이 명확한가요? – user690750

경로 세그먼트별로 획 색상을 설정하는 것이 좋습니다. –

경로 요소의 배열 (createElement ('path'))을 만드는 것 외에는 더 좋은 방법이 있습니까? 그룹이나 경로의 서브 그룹에 액세스 할 수 있습니까? 나는 수색에서 무엇이든을 찾아 낼 수 없었다. – user690750

다중 색상 SVG 폴리 라인

답변

관련 문제