path.getTotalLength() gibt falsche Werte zurück

Ich habe kürzlich mit SVG-Animation gespielt. Genauer gesagt versuche ich nur, die Wirkung von Linien zu erzielen, die sich selbst zeichnen. Bis jetzt macht es Sinn, aber ich habe ein paar Probleme.path.getTotalLength() gibt falsche Werte zurück

Bei komplexen Formen der von getTotalLength() zurückgegebenen Werte scheinen falsch zu sein. Es sagt normalerweise, dass der Pfad länger ist als er ist.

In diesem Beispiel ist der Pfad (auf meinem Bildschirm) ist etwa die Hälfte von dem, was berichtet hat: 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; 
}

Javascript:

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; 
}

Sie werden eine kleine Verzögerung bemerken, bevor die Grenze zu zeichnen beginnt. Das Spielen mit dem Wert strokeLen (z. B. das Teilen von path1Len mit 2) kann den Anfang der Zeile näher an den richtigen Punkt bringen, aber eine solche Codierung ist wahrscheinlich auf verschiedenen Geräten und Auflösungen nicht korrekt.

Ich bekomme die gleichen Ergebnisse unabhängig vom Browser. Ich habe einige alte Firefox-Fehlerberichte von vor ein paar Jahren gefunden, die das gleiche Problem betreffen, aber sie sagten, es sei behoben und erwähnen, dass es kein Problem für Chrome war.

Kennt jemand eine Lösung für dieses?

Quelle

2016-10-28 Adam

Ihr Problem wird durch die Tatsache, dass Sie verwenden:

vector-effect: non-scaling-stroke;

Verwendung bedeutet dies, dass Sie Pfad umgewandelt wird, aber der Hub (und damit die dasharray) nicht.

Wenn Sie die vector-effect entfernen und die stroke-width größer machen (so dass es sichtbar ist), erhalten Sie ein besseres Ergebnis. Allerdings müssen Sie jetzt noch ein paar andere Dinge beheben.

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

Quelle

2016-10-28 05:44:06

path.getTotalLength() gibt falsche Werte zurück

Antwort

Verwandte Themen