把svg的polygon转为path的方法和调整形变的方法

最新推荐文章于 2024-08-12 08:48:59 发布
最新推荐文章于 2024-08-12 08:48:59 发布
阅读量7.6k 收藏 1
点赞数 1
分类专栏： 前端小思 文章标签： javascript svg path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuweitiandian/article/details/50595567
版权

发现自己很久没有写博客了，所以现在每天都提醒自己，今天有什么收获，今天有什么值得记录一下的。

这篇博客就来说一下最近有个项目有用到svg地图中遇到的一个问题：设计师导出svg之后，是用的polygon，但是ammap里面的地图是用path去表示的，同时，你转成path之后，svg的大小和偏移量并不符合要求。


根据上面的问题，找到了两个方法：

演示地址：http://codepen.io/fonglezen/pen/EPEBeX


所有代码都已经在codepen上面了，里面也有写简单的注释，html里面放了一个svg。


（把代码弄到codepen里面去，然后写到这里我竟然有点不知道怎么写下去了……内心有点纠结，不知道怎么写下去，应该写什么！代码都贴出来了，应该可以了吧。可是这样不算一篇博客呀！摔！）

fonglezen
关注
专栏目录
svgpath:SVG路径低级转换工具包
05-10
svgpath 用于SVG路径转换的低级工具包。 有时您不能使用transform属性，而必须直接将更改应用于svg路径。 那么这个包是给你的:)！ 注意：此软件包适用于字符串，而不适用于完整的svg xml源。 安装 npm install svgpath 例子 var svgpath = require ( 'svgpath' ) ; var transformed = svgpath ( __your_path__ ) . scale ( 0.5 ) . translate ( 100 , 200 ) . rel ( ) . round ( 1 ) . toString ( ) ;
convertPath:将svg形状元素转换为路径svg元素的节点库
04-29
convertPath 将svg形状元素转换为路径svg元素的节点库。 安装 npm install convertpath 它能做什么 convertpath具有基于插件的体系结构，因此几乎每个优化都是一个单独的插件。 今天我们有： 插入 描述 将defs和symbol元素转换为svg组元素。 将svg形状元素转换为路径svg元素。 移动一些组并将一些组属性移动到所包含的元素 删除转换属性并将路径数据转换为相对 如果通过url（'＃id'）引用则删除渐变 删除宽度/高度属性并重置ViewBox 用法 const SVGParser = require('convertpath') const parse = SVGParser.parse('./test/test.svg', { plugins: [ { convertUseToGroup: t
SVG Path Editor 使用教程
gitblog_00162的博客
08-10 366
SVG Path Editor 使用教程 svg-path-editorOnline editor to create and manipulate SVG paths项目地址:https://gitcode.com/gh_mirrors/sv/svg-path-editor 本教程将指导您了解并使用SVG Path Editor，一个在线工具，用于创建和编辑SVG路径数据。 1. 目录结构及介...
学习SVG（六）路径 - ＜path＞
小小的前端
07-21 3328
path
svg基本形状转为path
weixin_40863414的博客
09-19 3408
svg中有rect,circle,ellipse,polygon等基本形状，有些时候我们需要将他们转为path，例如描边动画，文字路径的效果需要path来实现。 转换后的描边动画： 转换后的文字路径效果： 更多细节，请参考文章： svg基本形状转为path ...
SVG格式图片转成HTML中SVG的Path路径
肖肖肖丽珠的博客
06-02 4153
svg的图片右键-记事本打开
探索SVGPath：一款强大的SVG路径工具
gitblog_00099的博客
04-17 769
探索SVGPath：一款强大的SVG路径工具 svgpathSVG path low level transformations toolkit项目地址:https://gitcode.com/gh_mirrors/sv/svgpath 是一个在线工具，旨在帮助开发者和设计师轻松地创建、修改与优化SVG路径代码。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形...
SVG从入门到放弃（2）-- 路径path的详细用法
u012576295的博客
01-17 7150
path路径是svg中最强大的图形
svg-pathdata:解析SVG PathDatas
04-02
svg-pathdata 简单有效地处理SVG路径数据（path [d]属性内容）。 用法 安装模块： npm install --save svg-pathdata 或将添加到HTML中的脚本中。 然后在您JavaScript文件中： const { SVGPathData , ...
思源SVG检查及故障排查方法.pptx
02-15
思源SVG（静止无功发生器）是一种用于电力系统中的电力电子设备，它能够动态调节电网中的无功功率，从而提高电力系统的稳定性与效率。SVG的检查与故障排查是确保其正常运行的关键环节。 首先，进行SVG模块测试前的...
convert-svg-path-to-polygon:通过对路径上的采样点将 svg 路径转换为 ​​svg 多边形的示例源
07-01
`convert-svg-path-to-polygon-master`这个项目的源代码提供了具体的实现细节，对于学习SVG路径处理和Java图形编程的开发者来说，这是一个宝贵的资源。你可以通过阅读和理解代码来深入掌握SVG路径的转换逻辑，以及...
svg-path-converter:SVG到JS的路径转换器
05-06
svg-path-converter NPM模块，用于将svgs转换为单路径。 这对于图标和其他单色SVG很有用。 当前不支持<text> 。 基于初始代码。 安装 npm install --save svg-path-converter 更新 版本1.0.12 修复了当使用精度> 0时与路径中的尾随零相关的错误 默认精度从0更改为4 版本1.0.11 具有两个以上参数的固定路径“ m”命令 修复了某些<rect>元素未正确转换的问题 版本1.0.8 Bug修复 更改的选项语法 用法 svgToPath（svgElement，[选项]） import svgToPath from 'svg-path-converter'; let svg = document.querySelector("svg"); let path = svgToPath(svg); 选项 选项 类型
PocketSVG：轻松将SVG文件转换为CGPath，CAShapeLayers和UIBezierPaths
02-03
PocketSVG 一个简单的工具包，用于以高性能的方式在iOS和macOS上显示和操作SVG。 该项目的目标不是成为一个完全兼容的SVG解析器/渲染器。 而是将SVG用作序列化CG / UIPath的格式，这意味着它仅支持可由CG / UIPaths表示的SVG功能。 彻底记录。 产品特点 支持SVG元素： path ， line ， polyline ， polygon ， rect ， circle ， ellipse 支持SVG命名颜色。 可以正常运行的iOS和macOS演示。 简单的API，用于将典型的SVG呈现为UIImageView / NSImageView或CALayer子类。 以CGPath形式访问SVG中的每个形状，以进行更精细的处理。 安装 迅捷软件包管理器 dependencies : [ . package ( url : " https://github.com/pocketsvg/PocketSVG.git " , . upToNextMajor ( from : " 2.6.0 " )) ] 椰子足 将此添加到您的Podfile：
SVG支持用<path> 标签用来定义图形的路径。本文将详细介绍SVG Path语法结构，并附图及SVG path实例以更直观的方式让你掌握SVG路径的运用
05-28
NULL 博文链接：https://helius1214.iteye.com/blog/619509
html5 svg 中元素点击事件添加方法
12-13
最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序（比如谷歌地图） •复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） •不适合游戏应用 做出的网页在
Webpack实战加载SVG的方法
11-27
SVG作为一种矢量图格式，具有清晰度高、可缩放、文件小等优点，尤其适合用于UI设计和图标库。 1. **SVG的优势** - 清晰度：SVG在任何缩放比例下都能保持图形的清晰度，解决了高分辨率屏幕下的显示问题。 - 文件...
09——svg中path的使用
weixin_42289080的博客
05-16 3263
path的简单使用
推荐一款卓越的在线SVG路径编辑器 —— SvgPathEditor
最新发布
gitblog_00148的博客
08-12 498
推荐一款卓越的在线SVG路径编辑器 —— SvgPathEditor svg-path-editorOnline editor to create and manipulate SVG paths项目地址:https://gitcode.com/gh_mirrors/sv/svg-path-editor 在现代网页设计和开发中，SVG（可缩放矢量图形）因其灵活性和高分辨率适应性而越来越受到欢迎。...
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
热门推荐
司马懿的西山居
11-25 1万+
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 （x，y）是矩形左上角坐标，默认是（0，0） （width，height）是矩形的宽度和高度 （rx，ry）是矩形圆角的水平半径和垂直半径 <s
svg.path常用方法
04-01
1. moveto(x, y): 将路径移动到给定的坐标(x, y)。 2. lineto(x, y): 从当前点画一条直线到给定的坐标(x, y)。 3. horizontal_lineto(x): 从当前点画一条水平线到给定的x坐标。 4. vertical_lineto(y): 从当前点画一条垂直线到给定的y坐标。 5. closepath(): 将路径闭合，即从当前点画一条直线到路径的起始点。 6. quadratic_bezier_to(x1, y1, x2, y2): 从当前点画一条二次贝塞尔曲线到给定的坐标(x2, y2)，控制点为(x1, y1)。 7. cubic_bezier_to(x1, y1, x2, y2, x3, y3): 从当前点画一条三次贝塞尔曲线到给定的坐标(x3, y3)，控制点1为(x1, y1)，控制点2为(x2, y2)。 8. arc_to(rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x2, y2): 从当前点画一条弧线到给定的坐标(x2, y2)，以(rx, ry)为半径，沿着x轴旋转x_axis_rotation度，large_arc_flag和sweep_flag用于确定弧线的方向和大小。 9. rect(x, y, width, height): 从给定的坐标(x, y)开始画一个宽为width，高为height的矩形。 10. ellipse(cx, cy, rx, ry): 以(cx, cy)为中心点，rx和ry分别为椭圆的x轴和y轴半径，画一个椭圆形。 11. polygon(points): 从给定的点集points开始画一个多边形。 12. path(): 返回当前路径的SVG路径字符串表示。 这些方法是svg.path中最常用的方法，可以用于创建各种形状和线条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值