JavaScript

Development Platform:
JavaScript

03-01.svg：Code Content
							<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500" style="font-weight:bold;font-family:arial,'lucida console',sans-serif,榛戜綋;font-size:14px;">
    <defs>
        <linearGradient id="line" x1="50%" x2="50%" y1="0%" y2="100%">
            <stop offset="20%" stop-color="#88AAEE"/>
            <stop offset="100%" stop-color="#224499"/>
        </linearGradient>
        <marker id="arrow" markerWidth="10" markerHeight="8" refX="4" refY="4" orient="auto">
            <path d="M0,0 8,4 0,8Z" fill="white" stroke="black"/>
        </marker>
        <g id="bg">
            <rect x="0" y="0" width="10" height="10" rx="5" ry="5"
                stroke="#223388" stroke-width="2" fill="url(#line)"/>
        </g>
    </defs>
    <rect x="0" y="0" width="400" height="500" fill="white"/>
    <g transform="translate(10,10)">
        <g transform="translate(0,0)">
            <circle cx="100" cy="50" r="40" stroke="#223388" stroke-width="2" fill="url(#line)"/>
            <text x="67" y="55" fill="white">startDrag</text>
            <line x1="100" y1="90" x2="100" y2="140" stroke="black" marker-end="url(#arrow)"/>
        </g>
        <g transform="translate(40,150)">
            <rect x="0" y="0" width="120" height="40" rx="5" ry="5"
                stroke="#223388" stroke-width="2" fill="url(#line)"/>
            <text x="30" y="25" fill="white">onDrag</text>
            <line x1="60" y1="40" x2="60" y2="60" stroke="black" marker-end="url(#arrow)"/>
        </g>
        <g transform="translate(40,220)">
            <rect x="0" y="0" width="120" height="40" rx="5" ry="5"
                stroke="#223388" stroke-width="2" fill="url(#line)"/>
            <text x="18" y="25" fill="white">onDragDrop</text>
            <line x1="60" y1="40" x2="60" y2="80" stroke="black" marker-end="url(#arrow)"/>
        </g>
        <g transform="translate(0,300)">
            <circle cx="100" cy="50" r="40" stroke="#223388" stroke-width="2" fill="url(#line)"/>
            <text x="67" y="55" fill="white">endDrag</text>
        </g>
    </g>
</svg>

						