<svg viewBox="0 0 230 170" width="230" height="170">
<!-- красный прямоугольник. все просто: его координаты, размер и цвет. -->
<rect x="25.787" y="24.356" width="86.676" height="70.201" style="fill: red; stroke: black;"/>
<!-- оранжевая фигура. тоже все просто: М - передвинуть курсор в стартовую точку. L - линия к следующей точке. Z - вернуться к стартовой точке -->
<path style="fill: orange; stroke: rgb(0, 0, 0);" d="M 180.515 41.547 L 237.821 14.327 L 219.197 58.74 L 258.595 58.023 L 254.297 106.733 L 188.395 92.407 L 151.862 111.748 L 180.515 41.547 Z"/>
<!-- зеленая фигура - тут все сложнее, множество кривых -->
<path style="fill: green; stroke: rgb(0, 0, 0);" d="M 48.71 167.622 C 50.051 166.281 51.028 163.24 52.292 162.608 C 57.371 160.068 73.586 162.932 75.931 167.622 C 77.241 170.243 78.035 175.457 80.229 177.651 C 83.99 181.412 92.17 181.949 98.137 181.949 C 112.297 181.949 116.317 171.648 124.641 163.324 C 126.493 161.473 128.677 164.495 128.939 164.757 C 130.374 166.192 133.649 165.733 135.386 168.338 C 138.074 172.37 141.312 183.208 146.131 184.814 C 151.308 186.54 156.094 181.103 159.742 178.367 C 165.987 173.683 170.882 171.204 178.366 171.204 C 177.805 169.522 178.375 166.208 177.65 164.757 C 172.743 154.943 154.156 155.875 146.131 151.863 C 139.792 148.693 129.294 154.13 122.492 151.863 C 107.921 147.006 91.9 141.834 75.931 141.834 C 67.335 141.834 58.739 141.834 50.143 141.834 C 49.192 141.834 42.335 141.046 41.547 141.834 C 39.738 143.643 35.013 144.874 33.667 147.565 C 27.725 159.449 37.784 167.622 48.71 167.622 Z"/>
</svg>.gradient-layer {
opacity: 1;
transition: opacity 2s ease-in-out;
}
svg:hover .gradient-layer {
opacity: 0;
}
foo.onmouseover = function(){
this.classList.toggle('rotate')
}img {
transition: transform 1s ease;
}
.rotate {
transform: rotate(45deg);
}ball.addEventListener('mousedown', function(evt) {
svg.addEventListener('mousemove', drag)
})
ball.addEventListener('mouseup', function(evt) {
svg.removeEventListener('mousemove', drag)
})
svg.addEventListener('mouseleave', function(evt) {
svg.removeEventListener('mousemove', drag)
})
function drag(evt) {
let x = evt.x - ball.cx.baseVal.value
let y = evt.y - ball.cy.baseVal.value
ball.setAttribute('transform', 'translate(' + x + ', ' + y + ')')
}
<svg viewBox="5 5 50 50">
<path d="M10 10 L10 20 L20 20 Z" fill="red"></path>
<path d="M15 10 l10 0 l0 10 Z" fill="blue"></path>
<path d="M10 25 h 7 v 7 Z" fill="#FACE8D"></path>
</svg>#active-path {
stroke-dasharray: 58% 200%;
}А знаете, странно, странно то, что никто мне так и не ответит. Я так понимаю что людям это всё не нужно(SVG и другие библиотеки).
Как они добились такой точности, что при изменении размера экрана всё остается на своих местах?Вообще непонятная часть. Что не так с точностью? Или, по вашему, каждый раз объекты должны сдвигаться сами по себе?
.icon:hover {
color: orange;
}
svg {
fill: currentColor;
}