SVG（可缩放矢量图形）绘制工具Method Draw

给大家介绍一个制作svg的工具
当我们在网页上要绘制一个非常复杂的svg图片的时候
可以借助于Method Draw工具进行绘制
绘制完毕后可以导出为代码拷贝到我们的项目当中
不需要下载，这是一个网页工具
工具地址：传送门
虽然这个网页bug很多
不过这依然是一个不错的工具

画布

点击画布，在页面的右侧我们可以调整画布属性

点击属性，滚动滑轮可以微调
或者直接双击修改属性值

工具栏

左侧工具栏

就像画图的工具栏一样

形状库

形状库有很多备选图形

选择一个图形后
左右键同时按可以再次选择图形

贝塞尔曲线

贝塞尔曲线绘制
在画布中某点按住鼠标左键，该点就是绘制弧的起点
然后在某点鼠标左键抬起， 松开的点就是贝塞尔曲线的控制点
再次点击另一点，就是弧的终点

形状调整

点击你绘制的图形在右侧可以控制样式
比如说画一个圆

可以调整它在画布的 (x,y)坐标、横纵半径、旋转角度、透明度、模糊度
以及位置（左对齐、右对齐、居中…）还有边线属性

导出代码

画完之后我们可以点击上面菜单栏view中的source导出为代码
或者直接Ctrl+U
然后我们就可以将代码拷贝出来
下面就是我用这个Method Draw工具绘制的一个叮当猫
虽然很丑b(￣▽￣)d，但是完全可以实现
（哦对了，补充一点，Ctrl+↑/↓ 可以调整图层深度，类似于z-index属性）

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" stroke="null" 
style="vector-effect: non-scaling-stroke;">
    <g stroke="null">
    <title stroke="null">background</title>
    <rect stroke="null" fill="#ffffff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
    <g stroke="null" style="vector-effect: non-scaling-stroke;" display="none" overflow="visible" y="0" x="0" 
    height="100%" width="100%" id="canvasGrid">
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
    </g>
    <g stroke="null">
    <title stroke="null">Layer 1</title>
    <rect stroke="#000" id="svg_80" height="110" width="132.222222" y="215.410635" x="221.944444" stroke-width="1.5" fill="#007fff"/>
    <rect stroke="#000" 
    style="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"/>
    <rect stroke="#ffffff" transform="rotate(21.50663948059082 199.36041259765628,217.56362915039057) "
     id="svg_78" height="19.601491" width="66.223528" y="207.762876" x="166.248638" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="58" rx="83.5" id="svg_32" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="58" rx="83.5" id="svg_36" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="58" rx="83.5" id="svg_38" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="100" rx="100" id="svg_13" 
    cy="137.631583" cx="290.000002" stroke-opacity="null" stroke-width="1.5" fill="#007fff"/>
    <ellipse stroke="#000" ry="58" rx="83.5" id="svg_2"
     cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="52.5" rx="56" id="svg_4" 
    cy="249.055556" cx="289.99999" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <rect stroke="#000" rx="12" id="svg_3" height="19" width="158" y="196" x="211" stroke-width="1.5" fill="#ff0000"/>
    <ellipse stroke="#000" ry="12" rx="12" id="svg_6" 
    cy="216.368421" cx="289.99999" stroke-width="1.5" fill="#bfbf00"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" 
    id="svg_8" y2="210.52632" x2="300.263148" y1="210.52632" x1="279.736832" stroke-opacity="null" 
    stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" 
    id="svg_10" y2="213.157899" x2="301.578943" y1="213.157899" x1="278.421048" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="3" rx="3" id="svg_11" cy="222.368425" cx="289.999986" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
   <ellipse stroke="#000" ry="0.263158" id="svg_14" cy="177.631583" cx="289.999998" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_17" cy="100" cx="268" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_16" cy="100" cx="312" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" 
    id="svg_19" cy="110.789478" cx="275" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="5" rx="2.368416" id="svg_18" cy="111.315794" cx="305" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;"
     ry="8" rx="8" id="svg_20" cy="123.684215" cx="290" stroke-opacity="null" stroke-width="1.5" fill="#ff0000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" 
    ry="4" rx="3" id="svg_22" cy="122" cx="292.894737" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#ffffff"/>
    <path stroke="#000" id="svg_24" d="m43.947368,172.105267" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" 
    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"/>
    <path stroke="#000" id="svg_29" d="m241.842104,166.842109c0,0 38.421053,30 96.315789,-0.526316" 
    fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" 
    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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(180 336.3157958984375,159.47369384765628) " stroke-linecap="null"
     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"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_44" y2="254.21053" x2="321.578947"
     y1="254.21053" x1="258.421053" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <path stroke="#000" id="svg_46" d="m259.736842,254.736846c0,0 28.421053,67.894737 61.052632,0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5"
     fill="#ffffff"/>
    <path stroke="#000" id="svg_48" d="m-144.27,87.983953l0.745,0l0,0c0.411452,0 0.745,0.333548 0.745,0.745c0,0.411452 -0.333548,0.745 -0.745,0.745l-0.745,0l0,
    -1.49z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_54" y2="320.52632" x2="354.999997" 
    y1="228.421057" x1="354.473681" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_56" y2="321.578951" x2="221.842105"
     y1="229.473688" x1="221.315789" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_51" y2="200.52632" x2="182.894737" y1="214.21053" x1="218.684211" 
    fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <path stroke="#000" id="svg_68" d="m279.210526,325.789478" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_61" y2="237.41893" x2="222.405638" y1="218.918133" x1="176.052632" 
    fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_50" cy="206.578952" cx="170.263158" fill-opacity="null" stroke-opacity="null" 
    stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_49" cy="260.789476" cx="398.157889" fill-opacity="null" stroke-opacity="null" 
    stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_57" y2="237.339185" x2="354.473684" y1="262.602343" x1="383.825092" 
    fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_58" y2="214.736846" x2="356.578947" y1="246.921852" x1="394.877725" 
    fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="4.057779" id="svg_97" cy="324.912246" cx="282.740307" 
    stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" ry="9.736842" rx="39.736841" id="svg_60" cy="329.210529" cx="242.105264" 
    stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.115795" id="svg_98" cy="324.477484" cx="297.304839" 
    stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.767938" id="svg_96" cy="325.202088" cx="296.652693" 
    stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <path stroke="#000" id="svg_69" d="m281.434033,328.093029c9.473684,-6.315789 16.842105,0 16.842105,0" fill-opacity="null" stroke-opacity="null" 
    stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" ry="8.947368" rx="37.63158" id="svg_59" cy="328.421056" cx="335.789469" stroke-opacity="null" stroke-width="1.5" 
    fill="#ffffff"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_100" y2="229.628863" 
    x2="221.777045" y1="238.221427" x1="221.925192" stroke-opacity="null" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_99" y2="228.888124"
     x2="353.776602" y1="237.480688" x1="353.92475" stroke-opacity="null" fill="none"/>
    <rect stroke="#007fff" style="vector-effect: non-scaling-stroke;" id="svg_102" height="8.686868" width="20" y="215.757575" x="220" 
    stroke-width="0" fill="#007fff"/>
    <rect stroke="#007fff" id="svg_101" height="8.888888" width="15.959595" y="215.757575" x="340.000006" stroke-width="0" fill="#007fff"/>
    </g></svg>

以上就是SVG（可缩放矢量图形）绘制工具Method Draw的内容，更多相关内容请关注PHP中文网（www.php.cn）！