给大家介绍一个制作svg的工具
当我们在网页上要绘制一个非常复杂的svg图片的时候
可以借助于Method Draw工具进行绘制
绘制完毕后可以导出为代码拷贝到我们的项目当中
不需要下载,这是一个网页工具
工具地址:传送门
虽然这个网页bug很多
不过这依然是一个不错的工具
画布
点击画布,在页面的右侧我们可以调整画布属性
点击属性,滚动滑轮可以微调
或者直接双击修改属性值
工具栏
左侧工具栏
就像画图的工具栏一样
形状库
形状库有很多备选图形
选择一个图形后
左右键同时按可以再次选择图形
贝塞尔曲线
贝塞尔曲线绘制
在画布中某点按住鼠标左键,该点就是绘制弧的起点
然后在某点鼠标左键抬起, 松开的点就是贝塞尔曲线的控制点
再次点击另一点,就是弧的终点
形状调整
点击你绘制的图形在右侧可以控制样式
比如说画一个圆
可以调整它在画布的 (x,y)坐标、横纵半径、旋转角度、透明度、模糊度
以及位置(左对齐、右对齐、居中…)还有边线属性
导出代码
画完之后我们可以点击上面菜单栏view中的source导出为代码
或者直接Ctrl+U
然后我们就可以将代码拷贝出来
下面就是我用这个Method Draw工具绘制的一个叮当猫
虽然很丑b( ̄▽ ̄)d,但是完全可以实现
(哦对了,补充一点,Ctrl+↑/↓ 可以调整图层深度,类似于z-index属性)
style="vector-effect: non-scaling-stroke;">
backgroundheight="100%" width="100%" id="canvasGrid">
Layer 1style="vector-effect: non-scaling-stroke;"
transform="rotate(40.294403076171875 369.72222900390625,238.4629669189453) "
id="svg_81" height="18.333333" width="67.777778" y="229.296298" x="335.833332" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
id="svg_78" height="19.601491" width="66.223528" y="207.762876" x="166.248638" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
ry="58" rx="83.5" id="svg_32" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
ry="58" rx="83.5" id="svg_36" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
ry="58" rx="83.5" id="svg_38" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
cy="137.631583" cx="290.000002" stroke-opacity="null" stroke-width="1.5" fill="#007fff"/>
cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
cy="249.055556" cx="289.99999" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
cy="216.368421" cx="289.99999" stroke-width="1.5" fill="#bfbf00"/>
id="svg_8" y2="210.52632" x2="300.263148" y1="210.52632" x1="279.736832" stroke-opacity="null"
stroke-width="1.5" fill="none"/>
id="svg_10" y2="213.157899" x2="301.578943" y1="213.157899" x1="278.421048" stroke-opacity="null" stroke-width="1.5" fill="none"/>
ry="3" rx="3" id="svg_11" cy="222.368425" cx="289.999986" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
stroke-linecap="null" stroke-linejoin="null" id="svg_12" y2="227.894741" x2="289.999995" y1="224.21053" x1="289.999995"
stroke-opacity="null" stroke-width="1.5" fill="none"/>
id="svg_19" cy="110.789478" cx="275" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
ry="5" rx="2.368416" id="svg_18" cy="111.315794" cx="305" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
ry="8" rx="8" id="svg_20" cy="123.684215" cx="290" stroke-opacity="null" stroke-width="1.5" fill="#ff0000"/>
ry="4" rx="3" id="svg_22" cy="122" cx="292.894737" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#ffffff"/>
id="svg_27" y2="181.578951" x2="290.263158" y1="132.105267" x1="289.736842" opacity="0.5"
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
id="svg_30" y2="179.473688" x2="289.999986" y1="131.578951" x1="289.999986" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-linecap="null" stroke-linejoin="null" id="svg_33" y2="148.421057" x2="266.578947" y1="147.894741" x1="219.736842" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-linecap="null" stroke-linejoin="null" id="svg_31" y2="148.947372" x2="359.736845" y1="148.421057" x1="312.89474" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="131.578951" x2="219.210526" y1="141.052636" x1="267.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
transform="rotate(-20 336.31579589843744,136.84210205078114) "
stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="132.105267" x2="312.368421" y1="141.578951"
x1="360.263158" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
transform="rotate(160 243.6842193603515,159.99999999999997) " stroke-linecap="null" stroke-linejoin="null" id="svg_37" y2="155.263162" x2="219.736842"
y1="164.736846" x1="267.631579" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-linejoin="null" id="svg_34" y2="154.736845" x2="312.368423" y1="164.21053" x1="360.26316" fill-opacity="null" stroke-opacity="null"
stroke-width="1.5" fill="none"/>
y1="254.21053" x1="258.421053" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
fill="#ffffff"/>
y1="228.421057" x1="354.473681" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
y1="229.473688" x1="221.315789" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-width="1.5" fill="#ffffff"/>
stroke-width="1.5" fill="#ffffff"/>
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
stroke-opacity="null" stroke-width="0" fill="#007fff"/>
stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
stroke-opacity="null" stroke-width="0" fill="#007fff"/>
stroke-opacity="null" stroke-width="0" fill="#007fff"/>
stroke-width="1.5" fill="none"/>
fill="#ffffff"/>
x2="221.777045" y1="238.221427" x1="221.925192" stroke-opacity="null" fill="none"/>
x2="353.776602" y1="237.480688" x1="353.92475" stroke-opacity="null" fill="none"/>
stroke-width="0" fill="#007fff"/>
以上就是SVG(可缩放矢量图形)绘制工具Method Draw的内容,更多相关内容请关注PHP中文网(www.php.cn)!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!