[svg] SVG의 호 경로로 원 그리기

나는 그것이 게임에서 조금 늦었다는 것을 알고 있지만, 새로운 질문과 비슷한 딜레마가 있었을 때 부터이 질문을 기억했으며 누군가가 여전히 하나를 찾고 있다면 우연히 “올바른”솔루션을 찾았습니다.

<path
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

다시 말해, 이것은 :

<circle cx="100" cy="100" r="75" />

이 경로로 달성 할 수 있습니다 :

  <path
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

비결은 두 개의 호를 갖는 것입니다. 두 번째 호는 첫 번째가 중단 된 곳에서 픽업하고 음의 직경을 사용하여 원래의 호 시작점으로 돌아갑니다.

하나의 원호에서 완전한 원으로 수행 할 수없는 이유는 (그냥 추측하고 있습니다) 당신은 그 자체로 (150,150이라고 말합시다) 자신에게 (150,150이라고 말하면서) 호를 그리도록 지시하기 때문입니다. “아, 나는 이미 거기에 있으며, 아크가 필요하지 않습니다!”.

내가 제공하는 솔루션의 장점은 다음과 같습니다.

1. 원에서 경로로 직접 쉽게 번역 할 수 있습니다.
2. 두 개의 호 선이 겹치지 않습니다 (마커 나 패턴 등을 사용하는 경우 문제가 발생할 수 있음). 깨끗하고 연속적인 선이지만 두 조각으로 그려져 있습니다.

텍스트 경로가 모양을 허용하도록 허용하는 경우이 중 어느 것도 중요하지 않습니다. 그러나 원과 같은 모양 요소에는 기술적으로 “시작”점이 없기 때문에 솔루션을 피하고 있다고 생각합니다.

jsfiddle 데모 : http://jsfiddle.net/crazytonyi/mNt2g/

최신 정보:

textPath참조 경로를 사용하고 호의 외부 가장자리에 텍스트를 렌더링하려는 경우 정확히 동일한 방법을 사용하지만 스위프 플래그를 0에서 1로 변경하여 외부의 외부를 처리합니다. 내부 대신 표면으로 경로를 지정하십시오 ( 1,0누군가가 중심에 앉아서 원을 그리며 1,1반경 거리에서 중심을 돌아 다니면서 옆에 분필을 끌고 있다고 생각하십시오). 위의 코드가 있지만 변경 사항이 있습니다.

<path
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

답변

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}