#svg #css-transitions
Вопрос:
Я работаю над панелью навигации в формате круга, разделенной на 5.Все элементы являются SVG. Это действительно похоже на круговую диаграмму.При наведении курсора на одну часть я хотел бы масштабировать элемент svg снаружи. Поскольку я пытаюсь использовать масштаб с помощью этого, элемент просто переводит себя дальше и создает эффект масштаба.Я не уверен, но я думаю, что это проблема перекрытия элемента css? В любом случае, если бы кто-нибудь мог помочь мне с этим, как сказать, чтобы деталь оставалась на том же месте, а затем масштабировалась больше, или мне нужно вручную перевести элемент в нужное место? Спасибо, вот репрезентация:
#group-part-1>text {
visibility: hidden;
}
#group-part-1:hover text {
visibility: visible;
}
#group-part-2>text {
visibility: hidden;
}
#group-part-2:hover text {
visibility: visible;
}
#group-part-3>text {
visibility: hidden;
}
#group-part-3:hover text {
visibility: visible;
}
#group-part-4>text {
visibility: hidden;
}
#group-part-4:hover text {
visibility: visible;
}
#group-part-5>text {
visibility: hidden;
}
#group-part-5:hover text {
visibility: visible;
}
#part-1:hover {
fill: red;
transform: scale(1.2);
}
#part-2:hover {
fill: green;
transform: scale(1.2);
}
#part-3:hover {
fill: purple;
}
#part-4:hover {
fill: orange;
}
#part-5:hover {
fill: blue;
} <svg width="210" height="297" viewBox="0 0 210 297" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="example">
<g id="group-part-5">
<path id="part-5"
d="M156.393 107.998C159.608 118.055 159.557 128.873 156.247 138.899C152.936 148.926 146.536 157.647 137.964 163.813L108.768 123.223L156.393 107.998Z"
fill="black" stroke="black" stroke-width="0.0132292" />
<text x="160" y="150" fill="black">Project</text>
</g>
<g id="group-part-4">
<path id="part-4"
d="M137.963 163.813C129.391 169.979 119.087 173.272 108.529 173.222C97.9698 173.171 87.6979 169.78 79.1853 163.532L108.768 123.223L137.963 163.813Z"
fill="#1A1A1A" stroke="black" stroke-width="0.0132292" />
<text x="90" y="200" fill="black">About</text>
</g>
<g id="group-part-3">
<path id="part-3"
d="M79.2054 163.547C70.6897 157.304 64.3689 148.526 61.1491 138.469C57.9293 128.413 57.9756 117.596 61.2815 107.568L108.768 123.223L79.2054 163.547Z"
fill="#333333" stroke="black" stroke-width="0.0132292" />
<text x="10" y="150" fill="black">Contact</text>
</g>
<g id="group-part-2">
<path id="part-2"
d="M61.2928 107.534C64.606 97.508 71.008 88.7885 79.5814 82.625C88.1547 76.4615 98.4593 73.1703 109.018 73.2231L108.768 123.223L61.2928 107.534Z"
fill="#4D4D4D" stroke="black" stroke-width="0.0132292" />
<text x="25" y="75" fill="black">Home</text>
</g>
<g id="group-part-1">
<path id="part-1"
d="M108.941 73.2228C119.5 73.2594 129.776 76.6378 138.297 82.8738C146.818 89.1097 153.146 97.8831 156.374 107.937L108.768 123.223L108.941 73.2228Z"
fill="#666666" stroke="black" stroke-width="0.0132292" />
<text x="150" y="75" fill="black">Work</text>
</g>
</svg> thanks
Ответ №1:
Вот как бы я это сделал:
- элемент svg центрирован вокруг точки {x:0,y:0}:
viewBox="-105 -105 210 210" - Я вычисляю точки для дуги в основании угла клина и радиуса окружности
- В этом примере я тоже поворачиваю текст, поэтому помещаю клин и текст в одну группу (
#group_part5) и преобразую группу при наведении курсора мыши:transform: translate(10px, 0) scale(1.2); - Я помещаю все в другую группу () и поворачиваю эту группу в нужное положение.
#example
//the angle for the circle wedge
let angle = 2*Math.PI/5;
//the radius of the circle wedge
let r = 60;
//calculate the points for the arc
let p1 = {x:r*Math.cos(-angle/2),
y:r*Math.sin(-angle/2)};
let p2 = {x:r*Math.cos(angle/2),
y:r*Math.sin(angle/2)};
//build the d attribute
let d = `M0,0L${p1.x},${p1.y}A${r},${r} 0 0 1 ${p2.x},${p2.y} z`;
//set the d attribute of the path
part5.setAttribute("d",d); svg {
border: solid;
}
#example {
transform: rotate(36deg);
}
#group_part5:hover {
fill: red;
transform: translate(10px, 0) scale(1.2);
}
#group_part5:hover text {
fill: black;
} <svg width="210" viewBox="-105 -105 210 210">
<g id="example">
<g id="group_part5">
<path id="part5" d="" />
<text fill="none" x="30">Project</text>
</g>
</g>
</svg> Наблюдение: Если вы не хотите использовать javascript, вы можете взять атрибут d для пути из инспектора.
Обновить
ОП комментирует
Единственное, что перемещается верхний левый угол «начала координат», я хочу, чтобы он оставался на том же месте, что и границы, граница должна быть только длиннее, а внешняя граница круга-дальше
Если я правильно понял вас в предыдущей демо-версии, пожалуйста, замените transform: translate(10px, 0) scale(1.2); на transform: scale(1.2);
Если это то, что вам нужно, есть более простой способ сделать это: вместо масштабирования клина вы можете добавить широкий штрих того же цвета, что и заливка, как в следующей демонстрации:
Пожалуйста, взгляните:
svg {
border: solid;
}
#example {
transform: rotate(36deg);
}
#group_part5:hover {
fill: red;
/*transform: translate(10px, 0) scale(1.2);*/
}
#group_part5:hover path:nth-of-type(2){stroke:red;}
#group_part5:hover text {
fill: black;
} <svg width="210" viewBox="-105 -105 210 210">
<g id="example">
<g id="group_part5">
<path id="part5" d="M0,0L48.54101966249685,-35.26711513754839A60,60 0 0 1 48.54101966249685,35.26711513754839 z"></path>
<path d="M48.54101966249685,-35.26711513754839A60,60 0 0 1 48.54101966249685,35.26711513754839" fill="none" stroke-width="10"></path>
<text fill="none" x="30">Project</text>
</g>
</g>
</svg> Комментарии:
1. Это бриллант! это практически то, чего я хочу! Единственное, что перемещается верхний левый угол «начала координат», я хочу, чтобы он оставался на том же месте, что и границы, граница должна быть только длиннее, а внешняя граница круга-дальше.