Wie skaliert man den SVG-Pfad an die Fenstergröße?

Question

Ich habe Probleme, das SVG auf die Fenstergröße anzupassen.

In diesem Beispiel habe ich einen welligen Pfad und ein Textelement, was ich hier erreichen möchte, ist das Textelement entlang des welligen Pfades von links nach rechts zu bewegen (was von GSAP erledigt wird) und in der Hälfte anzuhalten Weg des Weges in der Anfangslast; Es wird bis zum Ende verschoben, wenn Benutzer mit dem Scrollen beginnen.

Mein Problem ist, dass der von SVG erstellte wellige Pfad zu lang ist, selbst die Hälfte des Pfades wird nicht im Fenster angezeigt. Ich habe versucht, den welligen Pfad zu verkleinern, indem viewBox, failed; mit css width: 100vw, fehlgeschlagen.

Ich habe auch die css transform Eigenschaft verwendet, es skaliert den welligen Pfad runter, aber das war eine feste Größe, ich möchte es so ansprechend wie möglich machen, was unabhängig von der Fensterbreite bedeutet, dass das Textelement immer stoppt Zuerst die Mitte des Bildschirms (auf halbem Weg des wellenförmigen Pfads) und dann auf die rechte Seite des Bildschirms. Ist dies bei Verwendung des Inline-SVG-Elements möglich? Wenn ja, bitte weisen Sie mich in die richtige Richtung.

Vielen Dank im Voraus!

(das Beispiel in Vollseitenmodus Bitte sehen, dass mein Problem perfekt erklären, aber die Scroll-Funktion wird deaktiviert, da die Höhe in diesem Modus ist 100vh, keinen Platz zum Scrollen ist)

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d")); 
 
var tl = new TimelineMax({ 
 
    repeat: 0, 
 
    delay: 1 
 
}); 
 
tl.to("#Text", 3, { 
 
    attr: { 
 
    startOffset: '50%', 
 
    opacity: 1 
 
    } 
 
}); 
 

 

 
window.addEventListener('scroll', function() { 
 
    tl.to("#Text", 3, { 
 
    attr: { 
 
     startOffset: '100%', 
 
     opacity: 0 
 
    } 
 
    }); 
 
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald); 
 
body { 
 
    background-color: #222; 
 
} 
 

 
svg { 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> 
 
<svg xml:space="preserve"> 
 
<defs><path id="MyPath"/></defs> 
 
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3 
 
\t s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/> 
 
<text font-size="7em" > 
 
    <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath> 
 
    </text> 
 
</svg>

Answer 1

Wenn Sie möchten, dass Ihr SVG auf den Bildschirm (oder einen übergeordneten Container) skaliert, muss es ein viewBox Attribut haben. Dieses Attribut teilt dem Browser die Dimensionen des SVG-Inhalts mit. Ohne es weiß der Browser, wie viel es skaliert werden muss.

Ihr Pfad ist ungefähr 3780 Breite, und die Unterseite davon ist bei y = 144. So ein vernünftiger Wert von viewBox wäre:

viewBox="0 0 3780 150" 

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d")); 
 
var tl = new TimelineMax({ 
 
    repeat: 0, 
 
    delay: 1 
 
}); 
 
tl.to("#Text", 3, { 
 
    attr: { 
 
    startOffset: '50%', 
 
    opacity: 1 
 
    } 
 
}); 
 

 

 
window.addEventListener('scroll', function() { 
 
    tl.to("#Text", 3, { 
 
    attr: { 
 
     startOffset: '100%', 
 
     opacity: 0 
 
    } 
 
    }); 
 
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald); 
 
body { 
 
    background-color: #222; 
 
} 
 

 
svg { 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> 
 
<svg viewBox="0 0 3780 150" xml:space="preserve"> 
 
<defs><path id="MyPath"/></defs> 
 
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3 
 
\t s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/> 
 
<text font-size="7em" > 
 
    <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath> 
 
    </text> 
 
</svg>

Answer 2

Hier ist, was Sie tun können: eine Medienabfrage definieren, die gewünschte Breite hinzufügen und dann die folgenden Stile getrennt für die text und path Elemente innerhalb des svg Element anwenden:

text { 
    font-size: 2em; 
} 

path { 
    -webkit-transform: scale(.3); 
    -ms-transform: scale(.3); 
    transform: scale(.3); 
} 

das Snippet Siehe unten:

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d")); 
 
var tl = new TimelineMax({ 
 
    repeat: 0, 
 
    delay: 1 
 
}); 
 
tl.to("#Text", 3, { 
 
    attr: { 
 
    startOffset: '50%', 
 
    opacity: 1 
 
    } 
 
}); 
 

 

 
window.addEventListener('scroll', function() { 
 
    tl.to("#Text", 3, { 
 
    attr: { 
 
     startOffset: '100%', 
 
     opacity: 0 
 
    } 
 
    }); 
 
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald); 
 
body { 
 
    background-color: #222; 
 
} 
 

 
svg { 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 

 
    text { 
 
    font-size: 2em; 
 
    } 
 
    
 
    path { 
 
    -webkit-transform: scale(.3); 
 
    -ms-transform: scale(.3); 
 
    transform: scale(.3); 
 
    } 
 
    
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> 
 
<svg xml:space="preserve"> 
 
<defs><path id="MyPath"/></defs> 
 
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3 
 
\t s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/> 
 
<text font-size="7em" > 
 
    <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath> 
 
    </text> 
 
</svg>

Ich hoffe, es hilft!