2017-08-29 89 views
0

我有麻煩縮放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>

回答

2

如果您希望SVG縮放以適應屏幕(或任何父容器),則需要具有viewBox屬性。該屬性告訴瀏覽器SVG內容的尺寸。沒有它,瀏覽器就知道需要縮放多少的方法。

你的路徑大約是3780寬度,它的底部是y = 144。所以viewBox一個合理的值將是:

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>

+0

我試圖使用viewBox來解決這個問題,但是我沒有完全理解它的用法,顯然我以錯誤的方式使用它。謝謝。 –

0

這裏是你可以做什麼:添加媒體查詢定義所需的寬度,然後分別採用以下樣式的SVG元素中的textpath元素:

text { 
    font-size: 2em; 
} 

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

請參見下面的代碼片段:

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>

我希望它能幫助!

+0

感謝您的回覆。理想情況下,我想避免使用這種方法,因爲'transform:scale()'將返回一個固定的大小,它不夠靈活以適應不同的屏幕大小。我正在尋找的是類似於內聯SVG元素的「width:100vw」,我對內聯SVG的知識非常有限,所以我不知道這是否是可實現的。 –

+0

當然,他也是我自己也一直在尋找的。我認爲使用內聯SVG實現它的唯一方法是通過修改媒體查詢中的值。 @Paul LeBeau的解決方案非常棒,他解決了它,謝謝! – Tedds

相關問題