Als Nachfolge zu Jheys kürzlichem Beitrag über responsive Bewegungspfade, weist Michelle Barker darauf hin, dass ein weiterer Ansatz darin bestehen könnte, das gesamte Element einfach mit transform: scale() zu skalieren.
Der Kompromiss dabei ist, dass sowohl der Pfad als auch das Element auf dem Pfad gleichzeitig skaliert werden. Jheys Ansatz macht nur den Pfad flexibel und das Element behält seine Größe.
Die Skalierungsberechnung ist meiner Meinung nach ein wirklich cooler Trick, und einer, über den wir auch schon einmal berichtet haben.
Sie können auch die Transform-Methode verwenden, um die Größe des Pfades visuell zu ändern, aber nicht die Elemente darauf. Sie müssen lediglich die Skalierung der untergeordneten Elemente invertieren.
Wo also die übergeordnete Komponente
scale( --var(x) )erhält, können Siescale( calc( 1 / --var(x) ) )für das untergeordnete Element verwenden, um es in die entgegengesetzte Richtung zu transformieren.Sie müssten wahrscheinlich Probleme mit dem Abstand berücksichtigen, die auftreten, aber wenn Sie nur ein Element auf dem Pfad haben, ist dies möglicherweise weniger ein Problem.