svgdrawer : setsvg() 指令
本帖最后由 马黑黑 于 2024-10-19 19:46 编辑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 在线运行：
//改变当前用户画布宽高与视口
dr.setsvg({width:400, height: 400, viewBox: '-200 -200 400 400'});
//画圆
dr.circle(0,0,100,'hotpink');这里，通过 setsvg() 指令重新设置了用户 svg 的宽高属性、视口，它们的改变使得当前用户 svg 的坐标系从左上角移到了 svg 画布的中心点，所以所绘制的圆心（0，0） 和 svg 画布的中心点重合。
顺便提一下，SVG Drawer 在线工具支持手动修改用户 svg 的宽高尺寸。
当前，SVGdrawer 还有许多问题需要解决，所以暂时还没有公开版本。
去试了一下，原本的宽高是800*400，运行后，画布宽高变为 400*400
能更改是最好的了，可以适应不同大小的需求了{:4_187:} 黑黑在SVG Drawer 在线工具花费了很多心力，真不容易。辛苦了{:4_190:} 这个setsvg() 的设置好，使用viewBox:把400*400的中心移动到原来的左上角了，画圆方便了，圆心取左上角就直接在中心了。当然，画三角形还是要再考虑一下的{:4_173:} 红影 发表于 2024-10-19 20:20
去试了一下，原本的宽高是800*400，运行后，画布宽高变为 400*400
能更改是最好的了，可以适应不同大小的 ...
对，就是这个出发点 红影 发表于 2024-10-19 20:23
黑黑在SVG Drawer 在线工具花费了很多心力，真不容易。辛苦了
这个用业余时间做做，确实需要大量的思考 马黑黑 发表于 2024-10-19 20:44
对，就是这个出发点
可以直接在里面画，画完了还能改，真方便。
刚才又去试验了一下，先用那个画了个图形，然后用setsvg()去改，没注意修改时的viewBox:设置，按原样再把刚画的粘下面，结果图形跑一边去了{:4_173:} 马黑黑 发表于 2024-10-19 20:45
这个用业余时间做做，确实需要大量的思考
是的，要考虑各种情况都做到js里，还需要设计接收的对应，非常细致严谨的事，太不容易了{:4_199:}{:4_187:} 红影 发表于 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的设置对于对称图形都十分方便呢{:4_199:} 马黑黑 发表于 2024-10-19 21:02
这里的机制是双svg：用户提供一个svg，插件创建另一个svg，一切指令操作在插件创建的svg里，然后实时搬到 ...
静态的已经很不容易了，还能弄动态啊，这个不敢想象。{:4_204:} 马黑黑 发表于 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');
漂亮，这个是越来越完善了。。{:4_199:} 花飞飞 发表于 2024-10-19 23:14
这个画布大小可以跟着贴子走，做大图贴子的时候很实用的呀。。
设置大画面之后，还可以根据需要把圆画在任 ...
{:4_187:} 马黑黑 发表于 2024-10-19 23:27
小花好看。。不谢了。 马黑黑 发表于 2024-10-19 22:38
viewBox是有点抽象的，很多人表示弄不清楚
之前就试过很多，感受它的含义，现在对viewBox倒是很能理解了{:4_204:}