如何缩放SVG路径以适应窗口大小？

Question

我有麻烦缩放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>

Answer 1

如果您希望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>

Answer 2

这里是你可以做什么：添加媒体查询定义所需的宽度，然后分别采用以下样式的SVG元素中的text和path元素：

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>

我希望它能帮助！