如何缩放SVG路径以适合窗口大小? [英] How to scale SVG path to fit the window size?

问题描述

我在缩放SVG以适应窗口大小时遇到​​麻烦.

I am having troubles to scale the SVG to fit the window size.

在此示例中，我有一条波浪形路径和一个text元素，我想在这里实现的是沿波浪形路径从左向右移动text元素(由GSAP完成)，然后半途停止初始载荷中的路径；当用户开始滚动时，它将移至末尾.

In this example, I have a wavy path and a text element, what I want to achieve here is to move the text element along the wavy path from left to right (which is done by GSAP) and stop in the half way of the path in the initial load; it will move to the end when users start scrolling.

我的问题是，由SVG创建的波浪形路径太长，即使该路径的一半不在窗口之内，我也尝试使用viewBox缩小波浪形路径，但失败了；使用css width: 100vw失败.

My problem is that, the wavy path created by SVG is too long, even the half way of the path will be off the window, I tried to scale down the wavy path by using viewBox, failed; using css width: 100vw, failed.

我还使用了css transform属性，它确实将波形路径缩小了，但这是一个固定的大小，我想使其尽可能地响应，这意味着无论窗口宽度如何，文本元素始终停止首先在屏幕中间(波浪路径的一半)，然后移至屏幕的右侧.使用内联SVG元素时，这可能吗?如果是这样，请指出正确的方向.

I also used the css transform property, it did scale the wavy path down, but that was a fixed size, I want to make it as responsive as possible, which means regardless the window width, the text element always stops in the middle of the screen first ( half way of the wavy path ), then moves to the right hand side of the screen. Is this possible when using inline SVG element? If so, please point me in the right direction.

提前谢谢！

(请以全页模式查看该示例，这将完美地解释我的问题，但是将禁用滚动功能，因为该模式下的高度为100vh，没有滚动空间)

(Please view the example in full page mode, that will explain my problem perfectly, but the scroll function will be disabled because the height in that mode is 100vh, there is no room for scrolling)

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
	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>

推荐答案

如果您希望SVG缩放以适合屏幕(或任何父容器)，则它需要具有viewBox属性.此属性告诉浏览器SVG内容的尺寸.没有它，浏览器就知道知道需要缩放多少的方法.

If you want your SVG to scale to fit the screen (or any parent container), it needs to have a viewBox attribute. This attribute tells the browser the dimensions of the SVG content. Without it, the browser has know way of knowing how much it needs to be scaled.

您的路径大约为3780宽，其底部位于y = 144.因此viewBox的合理值应该是:

Your path is about 3780 width, and the bottom of it is at y=144. So a reasonable value of viewBox would be:

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
	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>

这篇关于如何缩放SVG路径以适合窗口大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！