svgdrawer : setsvg() 指令

马黑黑

SVGdrawer不会主动去改变用户 svg 的属性，不过经过考虑，还是应该具备更改的能力，当然，这应是使用者的权限。

要改变现有 svg 的属性，指令是 ：setsvg(option);

option 参数是一个JS对象，以 键值对 的形式传递一个或多个属性值。例如，希望正在使用的 svg 画布宽高为 400*400，并加上命名空间属性，option 可以这样组织 option 参数——

{ width: 400, height: 400, xmlns: 'http://www.w3.org/2000/svg' }

其中，每一个键值对，冒号前的是健名即属性名称，冒号后面的是键值即属性值。svg drawer 约定，单一单位数字的数值不需要引号，字符串需要引号。

以下代码，可以拿到 SVG DRAWER 在线运行：

1. //改变当前用户画布宽高与视口
   
2. dr.setsvg({width:400, height: 400, viewBox: '-200 -200 400 400'});
   
3. //画圆
   
4. dr.circle(0,0,100,'hotpink');

复制代码

这里，通过 setsvg() 指令重新设置了用户 svg 的宽高属性、视口，它们的改变使得当前用户 svg 的坐标系从左上角移到了 svg 画布的中心点，所以所绘制的圆心（0，0） 和 svg 画布的中心点重合。

顺便提一下，SVG Drawer 在线工具支持手动修改用户 svg 的宽高尺寸。

当前，SVGdrawer 还有许多问题需要解决，所以暂时还没有公开版本。

红影

去试了一下，原本的宽高是800*400，运行后，画布宽高变为 400*400
能更改是最好的了，可以适应不同大小的需求了

红影

黑黑在SVG Drawer 在线工具花费了很多心力，真不容易。辛苦了

红影

这个setsvg() 的设置好，使用viewBox:把400*400的中心移动到原来的左上角了，画圆方便了，圆心取左上角就直接在中心了。当然，画三角形还是要再考虑一下的

马黑黑

红影 发表于 2024-10-19 20:20
去试了一下，原本的宽高是800*400，运行后，画布宽高变为 400*400
能更改是最好的了，可以适应不同大小的 ...

对，就是这个出发点

马黑黑

红影 发表于 2024-10-19 20:23
黑黑在SVG Drawer 在线工具花费了很多心力，真不容易。辛苦了

这个用业余时间做做，确实需要大量的思考

红影

马黑黑 发表于 2024-10-19 20:44
对，就是这个出发点

可以直接在里面画，画完了还能改，真方便。
刚才又去试验了一下，先用那个画了个图形，然后用setsvg()去改，没注意修改时的viewBox:设置，按原样再把刚画的粘下面，结果图形跑一边去了

红影

马黑黑 发表于 2024-10-19 20:45
这个用业余时间做做，确实需要大量的思考

是的，要考虑各种情况都做到js里，还需要设计接收的对应，非常细致严谨的事，太不容易了

马黑黑

红影 发表于 2024-10-19 20:44
这个setsvg() 的设置好，使用viewBox:把400*400的中心移动到原来的左上角了，画圆方便了，圆心取左上角就直 ...

其实画三角形也是没有问题的。比方说画一个居中的三角形：

dr.setsvg({width:400, height:400, viewBox: '-200 -200 400 400'});
dr.polygon('0 -180, -180 180, 180 180', 'none', 'blue', 3);

马黑黑

红影 发表于 2024-10-19 20:51
是的，要考虑各种情况都做到js里，还需要设计接收的对应，非常细致严谨的事，太不容易了{:4_187 ...

这里的机制是双svg：用户提供一个svg，插件创建另一个svg，一切指令操作在插件创建的svg里，然后实时搬到用户svg上面。

如果直接在用户svg上作画，会出现很多问题，不如动画运行可能不正常。

现在的方向主要是在静态图形的绘制方面，不过也可以通过 draw() 指令实现动画。

马黑黑

红影 发表于 2024-10-19 20:49
可以直接在里面画，画完了还能改，真方便。
刚才又去试验了一下，先用那个画了个图形，然后用setsvg()去 ...

坐标系很重要的

红影

马黑黑 发表于 2024-10-19 20:54
其实画三角形也是没有问题的。比方说画一个居中的三角形：

dr.setsvg({width:400, height:400, viewBo ...

哦，也是，这个viewBox的设置对于对称图形都十分方便呢

红影

马黑黑 发表于 2024-10-19 21:02
这里的机制是双svg：用户提供一个svg，插件创建另一个svg，一切指令操作在插件创建的svg里，然后实时搬到 ...

静态的已经很不容易了，还能弄动态啊，这个不敢想象。

红影

马黑黑 发表于 2024-10-19 21:03
坐标系很重要的

是啊，开始没注意。不过通过这样试验，更关注viewBox的设置了。

马黑黑

红影 发表于 2024-10-19 21:46
是啊，开始没注意。不过通过这样试验，更关注viewBox的设置了。

viewBox是有点抽象的，很多人表示弄不清楚

马黑黑

红影 发表于 2024-10-19 21:45
静态的已经很不容易了，还能弄动态啊，这个不敢想象。

svg动画有些复杂：

（一）原生svg动画属性繁多，想简化它非常难；
（二）CSS驱动svg元素实现的动画：需要使用者自己设计css相关内容
（三）使用 JS 驱动的动画：很难集成到插件中

（三）估计不去实现。（一）、（二）现在其实已经可以做到，原生svg动画可以使用 draw + addTo 完成，CSS动画要先设置好CSS样式，然后给元素添加 class 属性——这个可以用 set 完成。

花飞飞

这个画布大小可以跟着贴子走，做大图贴子的时候很实用的呀。。
设置大画面之后，还可以根据需要把圆画在任意位置，修改dr.circle(0,0,100,'hotpink');
漂亮，这个是越来越完善了。。

马黑黑

花飞飞 发表于 2024-10-19 23:14
这个画布大小可以跟着贴子走，做大图贴子的时候很实用的呀。。
设置大画面之后，还可以根据需要把圆画在任 ...

花飞飞

马黑黑 发表于 2024-10-19 23:27

小花好看。。不谢了。

红影

马黑黑 发表于 2024-10-19 22:38
viewBox是有点抽象的，很多人表示弄不清楚

之前就试过很多，感受它的含义，现在对viewBox倒是很能理解了