De.Minov Asked:2020-12-27 03:46:36 +0000 UTC2020-12-27 03:46:36 +0000 UTC 2020-12-27 03:46:36 +0000 UTC 可以使用哪些程序和生成器来方便编写svg代码 772 您为 SVG 推荐什么程序? 如果有的话,最好使用 HTML“代码生成”。 更新 问题的作者显然是指帮助编写 svg 代码的程序 javascript 1 个回答 Voted Best Answer Alexandr_TT 2020-12-27T12:59:43Z2020-12-27T12:59:43Z 更新 看看线程的结尾。添加了一个实用程序,只需按一下按钮,即可从静态 SVG 文件制作线条绘制动画。 如果我正确理解了这个问题,作者需要使编写 SVG 代码更容易的工具。 SVG 生成器路径 一个非常方便的项目。 你移动锚点,移动杠杆,补丁代码写在底部。 可用于为卷曲的网站标题、波浪动画等编写代码。 生成器生成的代码,在掌握SVG期间,最好加inline,也就是直接copy到HTML 掀起波澜! 另一个波发生器。可以选择从矩形到贝塞尔曲线的波形。 路径长度计算器 复制公式path并获得其最大长度。 长度计算path是必要的,通过改变属性来写画线动画代码stroke-dasharray SVG 路径生成器 添加、删除、移动锚点以获得所需的曲线形状。代码写在右下角path 方形 SVG 快速、功能丰富的矢量编辑器 剪辑路径生成器 https://codepen.io/jh3y/pen/XqVQqa http://bennettfeely.com/clippy/ https://betravis.github.io/shape-tools/polygon-drawing/ 基本的 SVG 形状生成器 直线发生器 直线 - 路径 矩形发生器 圆发生器 椭圆发生器 贝塞尔曲线生成器 三次贝塞尔曲线 二阶贝塞尔曲线 二阶平滑贝塞尔曲线 上述所有 svg 代码生成器的原理都是相同的:移动锚点,移动它们的句柄并复制 SVG 代码。 使用生成器的过程清晰、方便,可以立即看到哪些属性在path动态变化。这有助于理解它们是如何工作的。 使用它们也很有好处,因为输出是干净的代码,无需添加矢量编辑器添加到 SVG 文件的服务信息。 SVG路径转换器 将 SVG 路径转换为全相对或全绝对 将所有命令转换为相对或绝对符号。 SVG 的 URL 编码器 2022 年 2 月 9 日更新 将 SVG 绝对剪辑路径转换为相对路径 将 path 的绝对坐标转换0-1为 clip-path 所需范围内的相对坐标clipPathUnits="objectBoundingBox" 字母到路径转换器 谷歌字体到 SVG 路径 要获得实现字母轮廓的SVG代码,必须选择字体、大小并写出字母或单词 开发工具 不幸的是,它并没有什么特别之处。是的,原则上,并不是特别必要。 由于 svg 在文本编辑器中很容易编辑,例如:Notepad++ 您可以在矢量编辑器中绘制复杂的形状:Inkscape, Adobe Illustrator. 对于绘制简单的形状,也有这样的编辑器: 编辑器方法 svg-edit.github.io 绘制 SVG JXNBLK/路径 SVG 路径编辑器(aydos.com) SVG 路径编辑器(yqnn.github.io) 波发生器 SVG 代码优化器 Jake Archibald 的SVGOMG Peter Collingridge 的SVG 编辑器 GreLI 的SVGO -GUI 我特别喜欢SVG 编辑器,并且几乎在每个应用程序中都使用它。 所有不必要的,服务信息被删除,您可以设置小数位数 y path。 svg 文件的大小有时会减少数倍,代码变得可读。 2019 年 12 月 4 日更新 动画的属性参数生成器 立方体贝塞尔曲线 关键样条生成器 另一个keysplines生成器 关键时间生成器 线条动画生成器 很简单:将 SVG 文件拖放到实用程序的加载窗口中,您将在输出端获得现成的线条绘制动画文件。
更新
看看线程的结尾。添加了一个实用程序,只需按一下按钮,即可从静态 SVG 文件制作线条绘制动画。
如果我正确理解了这个问题,作者需要使编写 SVG 代码更容易的工具。
一个非常方便的项目。
你移动锚点,移动杠杆,补丁代码写在底部。
可用于为卷曲的网站标题、波浪动画等编写代码。
生成器生成的代码,在掌握SVG期间,最好加inline,也就是直接copy到
HTML掀起波澜!
另一个波发生器。可以选择从矩形到贝塞尔曲线的波形。
复制公式
path并获得其最大长度。长度计算
path是必要的,通过改变属性来写画线动画代码stroke-dasharray添加、删除、移动锚点以获得所需的曲线形状。代码写在右下角
path快速、功能丰富的矢量编辑器
剪辑路径生成器
基本的 SVG 形状生成器
贝塞尔曲线生成器
上述所有 svg 代码生成器的原理都是相同的:移动锚点,移动它们的句柄并复制 SVG 代码。
使用生成器的过程清晰、方便,可以立即看到哪些属性在
path动态变化。这有助于理解它们是如何工作的。使用它们也很有好处,因为输出是干净的代码,无需添加矢量编辑器添加到 SVG 文件的服务信息。
SVG路径转换器
将 SVG 路径转换为全相对或全绝对
将所有命令转换为相对或绝对符号。
SVG 的 URL 编码器
2022 年 2 月 9 日更新
将 SVG 绝对剪辑路径转换为相对路径
将 path 的绝对坐标转换
0-1为 clip-path 所需范围内的相对坐标clipPathUnits="objectBoundingBox"字母到路径转换器
谷歌字体到 SVG 路径
要获得实现字母轮廓的SVG代码,必须选择字体、大小并写出字母或单词
开发工具
不幸的是,它并没有什么特别之处。是的,原则上,并不是特别必要。
由于 svg 在文本编辑器中很容易编辑,例如:
Notepad++您可以在矢量编辑器中绘制复杂的形状:
Inkscape,Adobe Illustrator.对于绘制简单的形状,也有这样的编辑器:
编辑器方法
svg-edit.github.io
绘制 SVG
JXNBLK/路径
SVG 路径编辑器(aydos.com)
SVG 路径编辑器(yqnn.github.io)
波发生器
SVG 代码优化器
我特别喜欢SVG 编辑器,并且几乎在每个应用程序中都使用它。
所有不必要的,服务信息被删除,您可以设置小数位数 y
path。svg 文件的大小有时会减少数倍,代码变得可读。
2019 年 12 月 4 日更新
动画的属性参数生成器
很简单:将 SVG 文件拖放到实用程序的加载窗口中,您将在输出端获得现成的线条绘制动画文件。