Previous: [SVG] What is SVG path?
Code:
<svg width="610" height="420" style="background-color:black">
<line x1="110" y1="210" x2="500" y2="210" style="stroke:white;stroke-width:3" />
<line x1="285" y1="50" x2="285" y2="380" style="stroke:white;stroke-width:3" />
<text x="225" y="30" fill="white" style="font-size:20px">High self-demand</text>
<text x="225" y="410" fill="white" style="font-size:20px">Low self-demand</text>
<text x="0" y="217" fill="white" style="font-size:20px">Pessimistic</text>
<text x="505" y="217" fill="white" style="font-size:20px">Optimistic</text>
<text x="150" y="150" fill="white" style="font-size:20px">perfectionist</text>
<text x="130" y="300" fill="white" style="font-size:20px">self-abandoner</text>
<text x="295" y="150" fill="white" style="font-size:20px">People who strive for excellence</text>
<text x="330" y="300" fill="white" style="font-size:20px">Buddhist</text>
</svg>
Result:
You might say that this is not a normal coordinate system. Yes, I just drew two vertical lines and added some text, but these can be used for your reference. What I didn't draw was just an arrow. You can use the path tag to achieve this. (The previous blog has made it very clear.)
Well, let me give the code:
<svg width="610" height="420" style="background-color:black">
<line x1="110" y1="210" x2="500" y2="210" style="stroke:white;stroke-width:3" />
<line x1="285" y1="10" x2="285" y2="400" style="stroke:white;stroke-width:3" />
<line x1="503" y1="210" x2="490" y2="200" style="stroke:white;stroke-width:3" />
<line x1="503" y1="210" x2="490" y2="220" style="stroke:white;stroke-width:3" />
<line x1="285" y1="8" x2="275" y2="20" style="stroke:white;stroke-width:3" />
<line x1="285" y1="8" x2="295" y2="20" style="stroke:white;stroke-width:3" />
<path d="M200 75 C 280,255 280 255, 405 75" fill="transparent" stroke="red" stroke-width="2" />
<g stroke="black" stroke-width="0" fill="white">
<circle id="x1" cx="305" cy="210" r="3" />
<circle id="x2" cx="325" cy="210" r="3" />
<circle id="x3" cx="345" cy="210" r="3" />
<circle id="x4" cx="365" cy="210" r="3" />
<circle id="x5" cx="385" cy="210" r="3" />
</g>
<line x1="325" y1="185" x2="325" y2="210" style="stroke:lime;stroke-width:3" />
<line x1="385" y1="105" x2="385" y2="210" style="stroke:lime;stroke-width:3" />
<line x1="365" y1="210" x2="385" y2="190" style="stroke:lime;stroke-width:3" />
<line x1="345" y1="210" x2="385" y2="170" style="stroke:lime;stroke-width:3" />
<line x1="325" y1="210" x2="385" y2="150" style="stroke:lime;stroke-width:3" />
<line x1="325" y1="195" x2="385" y2="130" style="stroke:lime;stroke-width:3" />
<text x="320" y="230" fill="red" >2</text>
<text x="380" y="230" fill="red" >5</text>
<text x="400" y="110" fill="red" >f(x)=x²</text>
<text x="510" y="230" fill="red" >x</text>
<text x="260" y="20" fill="red" >y</text>
</svg>
Let's see the result:
(Sorry about this image is not accurate, it is only used to express meaning.)
Okay, I have indeed given you an example, and then you can use your own imagination to complete this coordinate system. Don't think too hard, it's really very simple.