程序员经验分享-hwhale

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

2024-05-28

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

在这个例子中，我有一个波浪路径和一个文本元素，我想在这里实现的是沿着波浪路径从左到右移动文本元素（这是由GSAP完成的）并停在路径的中间在初始负载下；当用户开始滚动时，它将移至末尾。

我的问题是，SVG 创建的波浪路径太长，即使路径的一半也会超出窗口，我尝试使用以下方法缩小波浪路径viewBox， 失败的;使用CSSwidth: 100vw， 失败的。

我也用过csstransform属性，它确实缩小了波浪路径，但这是一个固定的大小，我想让它尽可能响应，这意味着无论窗口宽度如何，文本元素总是首先停在屏幕中间（波浪路径），然后移动到屏幕的右侧。使用内联 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
	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 内容的尺寸。没有它，浏览器就知道需要缩放多少。

您的路径宽度约为 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
	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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

如何缩放 SVG 路径以适应窗口大小？ 的相关文章

  • 获取可拖动元素的ID

    有没有办法在原生 HTML5 拖放中获取具有属性的元素的 iddraggable true 起初我认为从可拖动容器中获取 id 是标准做法 但实际上它始终是从您开始拖动的子元素中获取 id 这非常烦人 这是一个小提琴 https jsfid

  • 如何修复无法加载资源状态 404 github 页面的问题

    我已经在 Github 上部署了我的项目 它给出了这个 控制台上出现错误 我该如何修复它 git 的链接是 https blessja github io Bottelary https blessja github io Bottelar

  • 使用 CSS3 过渡延迟鼠标移出/悬停

    我有一个盒子 悬停时会改变大小 但是 我想延迟鼠标移出阶段 以便框在恢复旧尺寸之前保持新尺寸几秒钟 div width 70px webkit transition 5s all div hover width 130px 不使用 Java

  • 为 d3.js 中的多个元素生成 ClipPaths

    我正在尝试创建部分填充的圆圈 就像最终的 纽约时报 政治大会可视化中的圆圈一样 http www nytimes com interactive 2012 09 06 us politics convention word counts h

  • Bootstrap 列中的文本未居中

    我在 Bootstrap 中构建了 1 10 1 列标题结构 现在我想将其居中 在 10 列中 但正如您通过页面中间的虚线看到的 不集中在正中间 为什么不 我怎样才能把它拿到那里 标题的高度取决于font size其中的文字 如何通过命令手

  • 找不到 PySide SVG 图像格式？

    我正在使用 Eclipse 的 PyDev 插件与 Qt 集成 我安装了 PySide 但在使用 SVG 图像格式时遇到问题 我知道当我运行我的应用程序时 格式位于C Python27 Lib site packages PySide pl

  • 为不同部分设置 rmarkdown 选项卡颜色

    我想用 Rmarkdown 创建一个 html html 应包含彩色选项卡 根据来自的答案这个问题 https stackoverflow com questions 55276670 coloring tabs in rmarkdown我

  • 单击一个元素突出显示其他元素

    单击另一个元素时有什么方法可以更改元素的属性吗 例如 考虑这种方法 我有一个像这样的链接 a href 100 Click me a 然后接近它我有这个 span class clickTarget Important text span

  • 由于某种原因，reCaptcha 呈现在最右下角

    我的 ajax 表单带有 recaptcha 简化的代码

  • 表排序器，无法正确按日期排序

    如果存在空格 表排序器的行为是否会有所不同 我对 tablesorter 还很陌生 但有人要求我快速将其添加到客户网站 特别是允许他们按发布日期排序 据我所知 日期 例如 2012 年 5 月 14 日 被读取为文本 因此我需要添加一个解析

  • 需要设计8个盒子，排成两排

    如何使用bootstrap设计如下8个盒子 Please 忽略颜色每个盒子都会类似于名片 它们应该只有 8 个盒子 排成两排 With 大屏幕中右侧和左侧的特定边距 and 不 小屏幕中的边距 所以在平板电脑中应该是 2 在移动设备中应该是

  • 使用 React 和 Ant Design 的浮动标签

    对于我的 React 应用程序 我正在尝试构建一个表单浮动标签使用具有不同输入类型的 Antd 模板 仅使用样式使标签浮动 到目前为止 我已经能够将标签放在输入后面 但是当我将转换 转换应用于我的CSS代码时 它似乎根本不起作用 这是我的表

  • 将跨度值存储到 JavaScript 变量中

    我正在尝试编写 javascript 它将遍历一个跨度 获取其值 并将其存储在可用于执行算术的变量中 span class ServerData 30 span span class ServerData 6 span 关于以上两行 我的功

  • 如何将列表项与项目符号垂直对齐？

    所以我有一个带有自定义项目符号图像的无序列表 它们是指向列表右侧的三角形 我希望该点与列表项中第一行文本的垂直中心对齐 我怎样才能实现这个目标 这是我目前正在查看的内容 ul li Photography for events and po

  • 如何使用 webpack 2 分离 css 文件中的 less 文件？

    我可以编译页面上的 less通过 webpack2 但我无法将 less 文件编译成 CSS 文件 webpack config js var path require path var webpack require webpack va

  • 使用 CSS 修复自定义字体行高

    在我正在开发的新网络应用程序上使用自定义字体时 我遇到了一个奇怪的问题 这种自定义字体 FF DIN 似乎具有自然垂直的偏离中心的行高 这迫使我放置一些顶部填充黑客来补偿按钮和输入等元素的顶部空间 示例 绿色字体 Helvetica Neu

  • 溢出-x 不工作

    我正在尝试为我的画廊实现一个滑块 目前 CSS 存在溢出 x 无法正常工作的问题 我想要一个水平滑块而不是垂直滚动 这是fiddle http jsfiddle net nevinm 6H43f 请务必看一下 testimg height

  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct

  • 关于调试打印样式表的建议？

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri

  • 父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

    我在 mousedown 上获取 offsetX 时遇到问题 下面是我的代码 div Click the text The mouseDown function is triggered when the mouse button is p

随机推荐

  • 您如何构建 SVN 存储库？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 什么是更好的 A server 1080 repo projectA trunk branches branch1 branches branc

  • PHP：如何将信息返回到等待的脚本并继续处理

    假设有两个脚本Requester php和Provider php Requester需要Provider进行处理并向其发出http请求 Provider php data data 在这种情况下 Provider 很快就找到了答案 但为了

  • 不要使用对象作为类型

    我收到 lint 错误 不要使用对象作为类型 当我使用对象作为类型时 示例如下 export const myFunc obj object string gt return obj toString 知道我应该为具有未知属性的对象赋予什么

  • 向 Python 函数添加属性的最佳方法

    以计算数学函数的 Python 函数为例 def func x a b c Return the value of the quadratic function ax 2 bx c return a x 2 b x c 假设我想以函数属性的

  • 正则表达式 - 如何从引号之间提取文本并排除引号

    我需要正则表达式方面的帮助 我需要创建一个规则来保留引号之间的所有内容并排除引号 例如 我要这个 STRING ID 0 Stringtext 变成了 Stringtext Thanks 做到这一点的方法是使用捕获组 然而 不同的语言处理捕

  • Google BigQuery 底层架构

    所以我大约 10 分钟前才开始摆弄 Google BigQuery 我想知道是否有人知道他们用来存储数据的底层架构 例如 这只是他们自己的下一代 BigTable 基础设施吗 另外 他们在索引 索引重建等方面使用什么样的策略是否清楚 我只是

  • .NET 的 C 代码解析器

    有谁知道 NET 的 C 解析器库吗 我打算将 C 代码解析为某种形式的对象图 这样我就可以将其转换为不同的语言 ANTLR 可以做你想做的事 它有一个 C 预处理器和 ANSI C 语法 https github com antlr gr

  • 使用 TLS PSK 加密时如何正确检测流结束？

    我已经准备好了一个简单的 TLS PSK 客户端测试用例 https github com afarber jetty newbie tree master TlsPskClient2 src main java de afarber tl

  • .ko 文件是如何构建的

    我正在尝试将我自己的驱动程序移植到Beagle 板 xm arm cortex A8 在移植时我试图弄清楚如何 ko文件实际构建 在我们的Makefile我们只有一个命令来构建 o file 怎样是一个 ko文件已建立 使用Linux 2

  • SQL FORMAT 函数错误

    这个SQL select FORMAT lNum from rpt myView 产生以下错误 参数数据类型 varchar 对于格式的参数 1 无效 功能 lNum is a varchar 10 运行 SQL Server 2012 v

  • 以点值检测 iPhone 6/6+ 屏幕尺寸

    鉴于新发布的 iPhone 6屏幕尺寸 http www apple com iphone compare iPhone 6 1334h 750w 2x in points 667h 375w iPhone 6 1920 1080 3x i

  • 通过 cli 部署到远程 Glassfish 实例

    我正在尝试通过命令行自动将 Java EE 应用程序从构建服务器 Jenkins 部署到远程 Glassfish 服务器 目前我正在使用 asadmin 它工作得很好 但这个选项要求我在构建服务器上也安装 Glassfish 我想避免这样做

  • 如何在 PL/pgSQL 中“执行”CTE 查询？

    我尝试在下面的代码示例中模拟我的问题 在下面的代码中 我正在做一个select from test在一个程序中 众所周知 我们必须使用perform关键字为此 这很好用 perform from test 但是 如果我尝试将这个简单查询重写

  • 使用启用了两步身份验证的 python 脚本从 nextcloud 下载文件

    我设置了一个 nextcloud 实例 我想使用 python 脚本从那里下载文件 我的 nextcloud 实例对所有用户强制执行两步身份验证 我希望它保持这种状态 我梦想的场景是使用requests库 因此请按照此处的文档进行操作htt

  • 检测Android N版本代码

    是否可以检测用户是否运行 Android N 我有一台装有 Android N 开发者预览版的 Nexus 6 如果我尝试获取构建版本Build VERSION SDK INT 它返回 23 等于 Android Marshmallow Q

  • 如何“切换”枚举变体？

    我想编写一个函数 将提供的值切换 切换到枚举中的下一个值并在末尾环绕 enum Direction NORTH SOUTH EAST WEST 例如 NORTH gt SOUTH SOUTH gt EAST EAST gt WEST WES

  • 使用itext java库复制时pdf文件大小大大增加

    我正在尝试使用 Java 中的 itextpdf 库将现有的 pdf 文件复制到一些新文件中 我使用的是 itextpdf 5 5 10 版本 我在两种方式上都面临着不同的问题 PDFStamper 和 PdfCopy 当我使用 PDFSt

  • 从多行中获取/选择值到sql server中的1行中

    我有一个表格 每列都有一些图像 Acd unq id Emp unq id Acd BImg1 Acd BImg2 Acd RImg1 Acd RImp2 Acd RImg3 Acd Active 1 1745 BinaryImg Bina

  • jquery Slide切换方向

    我正在尝试滑动 jquery slideToggle 但我无法在单击 div 导航 时添加从左到右或从右到左的方向 请帮帮我 下面是我的代码 div style width 50px div

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

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是

热门标签