path.getTotalLength()가 잘못된 값을 반환합니다.

최근에 svg 애니메이션으로 놀았습니다. 좀 더 구체적으로 말하면, 저는 스스로 선 그리기의 효과를 얻으 려합니다. 지금까지는 의미가 있지만 몇 가지 문제가 있습니다.path.getTotalLength()가 잘못된 값을 반환합니다.

복잡한 모양의 경우 getTotalLength()에 의해 반환 된 값이 잘못된 것처럼 보입니다. 보통 길은 그 길이보다 길다고합니다. https://jsfiddle.net/36u7Lztv/2/

HTML :

<svg width="1023.5735" height="339.87985" viewBox="0 0 1023.5737 339.87985" > 
    <g transform="translate(-2.8122176,-453.90997)" > 
     <path id='lens_right' class='lens' 
      d="m 316.71289,297.36523 c -0.11819,0.016 -0.24013,0.0412 -0.35742,0.0547 0.566,0.18666 1.12735,0.23429 1.68164,0.16602 -0.44147,-0.0734 -0.88314,-0.14373 -1.32422,-0.22072 z M 173.86328,445.8125 C 115.7806,445.9007 56.06865,450.63489 1.0585938,461.85352 l 1.9397734,72.7392 c -1e-7,0 16.2532068,18.31933 17.1835938,36.63281 7.809399,154.2024 84.019299,222.56445 230.091789,222.56445 117.58238,0 160.41001,-31.53414 192.45313,-124.72461 34.65112,-100.76402 54.39723,-115.49536 72.95078,-115.49536 18.55362,0 36.33586,14.73134 70.98281,115.49536 32.05142,93.19047 74.8706,124.72461 192.45703,124.72461 146.07668,0 222.2826,-68.36205 230.0918,-222.56445 0.9262,-18.31554 17.1719,-36.63477 17.1719,-36.63477 l 0,-73.26953 C 970.87866,455.60266 908.72901,458.90001 850.64648,458.8125 775.96903,458.69998 707.53291,462.34077 650.69355,469.17304 539.89171,481.65973 487.5315,480.99999 376.36719,464.59766 320.52651,453.26539 248.54104,445.69916 173.86328,445.8125 Z" 
      transform="matrix(1.0086962,0,0,1,-8.9208996,-1.22e-4)" 
      /> 
    </g> 
</svg>

CSS :

body { 
    background: teal; 
} 

svg { 
    width: 50%; 
} 

svg path { 
    fill: #000000; 
    fill-opacity: 1; 
    stroke: #ffffff; 
    stroke-width: 1; 
    vector-effect: non-scaling-stroke; 
    transition: all 3s linear; 
}

자바 스크립트 :

이 예에서

는 (내 화면) 경로 주변에보고 무슨의 절반

var path1 = document.getElementById('lens_right'); 
var path1Len = path1.getTotalLength(); 

var strokeLen = path1Len; // easier troubleshooting 

path1.style.strokeDasharray = strokeLen; 
path1.style.strokeDashoffset = -strokeLen; 

// add/remove border on hover 
document.body.onmouseover = function() { 
    path1.style.strokeDashoffset = '0'; 
} 

document.body.onmouseout = function() { 
    path1.style.strokeDashoffset = -strokeLen; 
}

경계선이 그려지기 전에 약간의 지연이 있음을 알 수 있습니다.

strokeLen (예 : path1Len을 2로 나눈 값)로 재생하면 선의 시작을 올바른 지점에 가깝게 놓을 수 있지만 그와 같은 것을 하드 코딩하는 것은 다른 장치 및 해상도에서 정확하지 않을 수 있습니다.

브라우저에 관계없이 동일한 결과가 나타납니다. 몇 년 전이 같은 문제와 관련된 이전 Firefox 버그 보고서를 발견했지만 Chrome의 문제는 아니라고 고정되어 있습니다.

누구에게도이 문제에 대한 해결책이 있습니까?

출처

2016-10-28 Adam

귀하의 문제는 당신이 사용하고 있다는 사실에 의해 발생되는 :

vector-effect: non-scaling-stroke;

이 당신이 경로가 변화되고 있음을 의미한다 사용하지만, 스트로크 (따라서 dasharray가) 없습니다.

vector-effect을 제거하고 stroke-width을 더 크게 표시하면 더 나은 결과를 얻을 수 있습니다. 비록 당신은 여전히 지금 몇 가지 다른 것들을 고칠 필요가 있습니다.

https://jsfiddle.net/36u7Lztv/4/

출처

2016-10-28 05:44:06

path.getTotalLength()가 잘못된 값을 반환합니다.

답변

관련 문제