EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.


[SVG] How to draw a coordinate system?

Previous: [SVG] What is SVG path?


<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>    


        High self-demand Low self-demand     Pessimistic     Optimistic          perfectionist     self-abandoner         People who strive for excellence         Buddhist      

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" />
	<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>

Let's see the result:

          2 5 f(x)=x² x y  

(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.

This article was last edited at 2020-12-12 14:43:41

* *