我有麻煩縮放SVG以適應窗口大小。如何縮放SVG路徑以適應窗口大小?
在這個例子中,我有一個波浪路徑和一個文本元素,我想在這裏實現的是沿着波浪路徑從左到右移動文本元素(由GSAP完成)並停止在一半初始加載路徑的方式;它將在用戶開始滾動時移動到最後。我的問題是,由SVG創建的波浪路徑太長,即使路徑的一半將離開窗口,我試圖通過使用viewBox
來縮小波浪路徑,失敗;使用css width: 100vw
,失敗。
我也使用了css transform
屬性,它確實縮小了波浪形的路徑,但是這是一個固定的大小,我想盡可能地做出響應,這意味着無論窗口寬度如何,文本元素總是停在屏幕中間的第一個(波浪路徑的一半),然後移動到屏幕的右側。使用內聯SVG元素時可以這樣嗎?如果是這樣,請指向正確的方向。
預先感謝您!
(請查看完整的頁面模式的例子,那將完全解釋我的問題,而是滾動功能將被禁用,因爲在該模式下高度100vh
,沒有足夠的空間用於滾動)
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>
我試圖使用viewBox來解決這個問題,但是我沒有完全理解它的用法,顯然我以錯誤的方式使用它。謝謝。 –