Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to repost this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/550
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.
Today's comments have reached the limit. If you want to comment, please wait until tomorrow (UTC-Time).
There is 18h54m21s left until you can comment.