svg
今天和女友吵架了，冷静下来后，思考了思考，生活就是这样，前一秒安然无忧，下一刻可能就是压的你气喘吁吁。但是即使如此，还是要生活。生活永远是属于积极奋进，不矫情的一波人的。
不感慨了，将最近写的一些svg的例子贴出来，通过代码缓解下心情。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<svg width="1500" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- 矩形 -->
<!-- <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> -->
<!-- 圆角矩形 ry:radius-y stroke-width:边框宽度-->
<!-- <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> -->
<!-- cy:center-y -->
<!-- <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> -->
<!-- 椭圆 -->
<!-- <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> -->
<!-- 直线 x1起点x；x2:终点x； -->
<!-- <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> -->
<!-- -->
<!-- <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/> -->
<!-- <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/> -->
<!-- 路径：曲线 -->
<!-- <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> -->
<!-- <path d="M10 10"/> -->
<!-- Points -->
<!-- <circle cx="10" cy="10" r="2" fill="red"/> -->
<!-- <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> -->
<!-- H:水平绝对距离； V:垂直绝对距离； M:move to;h：水平相对距离；v：垂直相对距离；dx：相对x；dy：相对y-->
<!-- <path d="M70 70 H 110 V 110 H 70 Z" fill="transparent" stroke="red"/> -->
<!-- 曲线 C：三组坐标，分别为第一斜率点，第二斜率点，终点-->
<!-- <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
<path d="M10 80 Q 85 40 180 180" stroke="black" fill="transparent"/>
<path d="M100 100" /> -->
<!-- <text x="10" y="10">Hello World!</text> -->
<!-- <text x="20" y="20">
<tspan font-weight="bold" x="300" y="400" fill="red">This is bold and red</tspan>
<tspan font-weight="bold" x="310" y="400" fill="blue">This is bold and red</tspan>
</text> -->
<!-- <text id="example" x="10" y="100">This is an example text.</text>
<text x="30" y="100">
<tref xlink:href="#example" />
</text> -->
<!-- 文字环绕路径 -->
<!-- <path id="my_path" d="M 50,50 C 100,100 100,50 280,30" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
This text follows a curve.
</textPath>
</text> -->
<!-- g：全局赋值属性 -->
<!-- <g fill="red">
<rect x="0" y="0" width="10" height="10" />
<rect x="20" y="0" width="10" height="10" />
</g> -->
<!-- <defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse"
x="0" y="0"
width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<g filter="url(#MyFilter)">
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
<path fill="#D90000"
d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="52">SVG</text>
</g>
</g> -->
<!-- 箭头 -->
<!-- <path d="M 0 0 L 10 5 L 0 10 z" stroke="#666"> -->
<!-- <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>
<rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> -->
<!-- <defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
<filter id="Gaussian_Blur"><fegaussianblur in="SourceGraphic" stddeviation="2"></fegaussianblur></filter>
<marker id="drag_arrow" refX="5" refY="2.5" markerWidth="5"
markerHeight="5"
orient="auto" markerUnits="strokeWidth" class="drag_fill">
<polyline points="0,0 5,2.5 0,5 0.2,2.5"></polyline>
</marker>
<marker id="arrow_triangle_5_black" refX="5" refY="2.5"
markerWidth="5" markerHeight="5" orient="auto" markerUnits="strokeWidth" fill="black">
<polyline points="0,0 5,2.5 0,5 0.4166666666666667,2.5"></polyline>
</marker>
</defs> -->
<!-- <path d="M10 10 H 90 V 90 H 10" fill="transparent" style="marker-end: url(#arrow_triangle_5_black);" stroke="black"/>
<path d="M30 30 h 40" fill="transparent" style="stroke: red;marker-start: url(#drag_arrow);marker-end: url(#arrow_triangle_5_black);"/> -->
<!-- <desc>Example toap02 - tspan within textPath</desc> -->
<!-- 设置path颜色等属性 -->
<!-- <use xlink:href="#MyPath" fill="#acd" stroke="green" /> -->
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">
We go
<!-- <tspan dy="-30" fill="red" >
up
</tspan>
<tspan dx="10" dy="30" fill="#ddd">
, fdfd
</tspan>
then we go down, then up again -->
</textPath>
</text>
<!-- x y 确定位置 -->
<!-- <text x="40" y="100">
<tspan>tspan line 1</tspan>
<tspan dy="30" fill="#acd">tspan line 2</tspan>
<tspan dy="40 50 60">123</tspan>
</text> -->
<!-- M（移动到某个点） L(直线) Q(二次Belzier曲线) -->
<!-- transform="translate(0,16)" 将g坐标系的原点，向y移动16px -->
<!-- <g transform="translate(0,16)">
<path d="M875.5338859558105,0L277.61376953125,28.5Q270.11376953125,28.5 262.61376953125,22.6875" stroke="red" stroke-width="4" fill="transparent"/>
</g>
<g transform="translate(0, 81)">
<g></g>
<g transform="translate(35, 0)">
<g></g>
</g>
<g transform="translate(65.57763671875, 0)">
<g></g>
</g>
<g transform="translate(79.91796875, 0)">
<g></g>
</g>
<g transform="translate(91.7255859375, 0)">
<g></g>
</g>
<g transform="translate(166.63525390625, 0)">
<g></g>
</g>
<g transform="translate(195.10546875, 0)">
<g></g>
</g>
<g transform="translate(217.11376953125, 0)">
<g></g>
<g class="span">
<rect x="21.5" y="-28.1875" width="24" height="11" class="span_时间 span_default" fill="lightgreen" stroke="#148414" rx="2" ry="1" data-span-id="T3" data-fragment-id="0"></rect><text x="33.5" y="-19.6875" fill="black">时间</text><path d="M0,-12.1875C0,-16.1875 33.5,-12.1875 33.5,-16.1875C33.5,-12.1875 67.18359375,-16.1875 67.18359375,-12.1875" class="curly" stroke="#148414"></path></g></g><g transform="translate(288.29736328125, 0)"><g></g></g><g transform="translate(317.97998046875, 0)"><g></g></g><g transform="translate(391.86767578125, 0)"><g></g></g><g transform="translate(420.00146484375, 0)"><g></g></g><g transform="translate(509.37744140625, 0)"><g></g></g><g transform="translate(537.35888671875, 0)"><g></g></g><g transform="translate(586.890625, 0)"><g></g></g><g transform="translate(617.0302734375, 0)"><g></g></g><g transform="translate(634.04296875, 0)"><g></g></g><g transform="translate(684.7490234375, 0)"><g></g></g><g transform="translate(720.54443359375, 0)"><g></g></g><g transform="translate(748.23388671875, 0)"><g></g></g><g transform="translate(795.4296875, 0)"><g></g></g><g transform="translate(809.77001953125, 0)"><g></g></g><g transform="translate(829.56298828125, 0)"><g></g></g><g transform="translate(894.76708984375, 0)"><g></g></g><g transform="translate(921.0283203125, 0)"><g></g></g><g transform="translate(946.12158203125, 0)"><g></g></g><g transform="translate(1008.13916015625, 0)"><g></g></g><g transform="translate(1070.4931640625, 0)"><g></g></g><g transform="translate(1143.68896484375, 0)"><g></g></g><g transform="translate(1195.19482421875, 0)"><g></g></g><g transform="translate(1234.62744140625, 0)"><g></g></g><g transform="translate(1251.087890625, 0)"><g></g></g><g transform="translate(1329.70458984375, 0)"><g></g></g><g transform="translate(1364.96044921875, 0)"><g></g></g><g transform="translate(1376.76806640625, 0)"><g></g></g><g transform="translate(1435.04052734375, 0)"><g></g></g><g transform="translate(1452.05322265625, 0)"><g></g></g><g transform="translate(1491.96826171875, 0)"><g></g></g>
<g class="arcs"></g></g> -->
</svg>
</body>
</html>
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
