Pytanie SVG, wektor-efekt = "nie skalujący-skok" i IE


Jak rozumiem, atrybut SVG vector-effect="non-scaling-stroke" powinien zapobiegać zniekształceniu obrysu (uczynić go grubszym lub cieńszym), jeśli / kiedy obiekt SVG jest skalowany lub rozciągany.

Na przykład - w tym skrzypcach (http://jsfiddle.net/1cj0ovae/5/), Mam dwa obiekty SVG; oba są 5 razy szersze niż są wysokie. Ponieważ pole widoku obu wywoła kwadrat, SVG są rozciągnięte i zniekształcone.

W górnym SVG - zielona ścieżka jest zniekształcona - jest znacznie grubsza niż powinna (stroke-width="2").

W niższej SVG, czerwona ścieżka jest wyświetlana "poprawnie" - skok grubości 2 piksele - ponieważ ma vector-effect="non-scaling-stroke" zestaw atrybutów.

Wydaje się, że działa to w Chrome, Safari i Firefoxie, ale nie w najnowszych wersjach IE (np. IE10).

Czy to jest błąd IE? Czy jest w pobliżu praca?


11
2018-04-22 08:48


pochodzenie




Odpowiedzi:


efekty wektorowe są częścią SVG 1.2 malutki oraz nadchodzące i jeszcze niedokończone specyfikacje SVG 2.

IE skierował tylko SVG 1.1, który nie ma efektów wektorowych. Inne UA mają wyselekcjonowane części SVG 1.2, takie jak efekty wektorowe, ale żadna z UA nie implementuje tego wszystkiego (opera 12, jak sądzę).

Aby obejść to, jak szeroki skok powinien być przy użyciu javascript. To znaczy. opracuj różnicę między transformacją, która została zastosowana do kształtu i zastosuj odwrotność tej zmiany do szerokości obrysu. To nie jest proste, jak znalazłem, gdy zaimplementowałem to w Firefoksie.


9
2018-04-22 08:57