Линия се прави с polyline. Като кооринатите на точките се разделят със запетайки и интервали. Първо се пише Х координатата, после У координатата (като У координатите въревят надолу): По този начин:
<polyline points="2,3 8,3" />
Също така, кръговете се правят с помощта на circle, като се изписват координатите на центъра и радиуса. По този начин:
<circle cx="2" cy="8" r="1"/>
И тате ми помогна да нарисувам на лист хартия с молив, мрежа с 11 квадратчета по ширина и дължина (от 0 до 10):
След това на един специален сайт - https://codepen.io/, тате ми настрой екрана, така че да пиша SVG-то в лявата част и да виждам резултата в дясната:
Ето го и SVG-то, което с малко помощ от тати, успях да напиша:
<svg viewBox="0,0 10,10"> <polyline points="2,3 8,3" /> <polyline points="2,6 2,3" /> <polyline points="2,6 8,6" /> <polyline points="8,3 8,6" /> <polyline points="5,3 5,6" /> <polyline points="3,5 7,5" /> <polyline points="5,3 2,6" /> <polyline points="5,3 8,6" /> <polyline points="4,0 4,3" /> <polyline points="5,0 5,3" /> <polyline points="6,0 6,3" /> <polyline points="4,1 6,1" /> <polyline points="4,2 6,2" /> <polyline points="2,1 2,3" /> <polyline points="3,1 3,3" /> <circle cx="2" cy="8" r="1"/> <circle cx="7" cy="8" r="2"/> </svg>
Няма коментари:
Публикуване на коментар