Прежде всего, я новичок в кодировании внешнего интерфейса, поэтому извините за очевидное (если проблема в этом).
Я провел последние пару дней, пытаясь работать с кругами SVG, и это было ужасное время. Намерение состояло в том, чтобы выровнять 3 круга SVG (маленький в центре страницы и два больших по бокам). Я НАКОНЕЦ-ТО добился этого сегодня, НО поведение состояния наведения теперь ведет себя странно (клянусь, это никогда не закончится).
Вот соответствующий код:
<div id = "nodes">
<!-- <object id = "about_nodes">
<embed id = "left_about_svg" src = "resources/node-images/left-about-subnode.svg" type = "image/svg-iml"></embed>
<embed id = "about_svg" src = "resources/node-images/about-node.svg" type = "image/svg-iml"></embed>
<embed id = "right_about_svg" src = "resources/node-images/right-about-subnode.svg" type = "image/svg-iml"></embed>
</object>-->
<div id = "about_node">
<object>
<embed id = "about_svg" src = "resources/node-images/about-node.svg" type = "image/svg-iml"></embed>
</object>
</div>
<div id = "left_about_subnode">
<object>
<embed id = "left_about_svg" src = "resources/node-images/left-about-subnode.svg" type = "image/svg-iml"></embed>
</object>
</div>
<div id = right_about_subnode>
<object>
<embed id = "right_about_svg" src = "resources/node-images/right-about-subnode.svg" type = "image/svg-iml"></embed>
</object>
</div>
Как видите, есть закомментированный HTML. Я экспериментировал с контейнерами разных уровней, чтобы понять, не в этом ли проблема. Это не так.
CSS:
#about_svg{
display: inline;
position: absolute;
width: 10%;
height: 10%;
left: 50%;
margin-top: 2%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}
#left_about_svg{
display: inline;
position: absolute;
width: 65%;
height: 65%;
left: 25%;
top: 3%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}
#right_about_svg{
display: inline;
position: absolute;
width: 65%;
height: 65%;
left: 75%;
top: 3%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}
И SVG:
<svg version="1.1" id="about_node" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-0.531 -0.583 25.063 25.114" preserveAspectRatio="xMidYMid meet"
style="enable-background:new -0.531 -0.583 25.063 25.114;" xml:space="preserve">
<defs>
<style type="text/css">
.circle{
fill:white;
stroke:#000000;
stroke-miterlimit:10;}
#about_node:hover .circle{
fill: red;
transition: 1s;
stroke: red;
}
</style>
</defs>
<circle class = "circle" cx="12" cy="12" r="12"/>
At the moment all 3 circles have essentially the same SVG (left and right circles don't have a hover state) so I'll just post this one.
По сути, я понял, что абсолютное позиционирование приводит к тому, что мой встроенный объект имеет большую прямоугольную рамку вокруг него (наблюдается, когда я использовал элемент проверки) вокруг моих кругов (около 3 диаметров в длину). Большие слева и справа от маленького в центре скрывают состояние зависания центрального.
Состояние наведения работает, если я:
1) уменьшить окно наполовину, смешав все мои круги вместе (еще одна проблема, которую мне нужно исправить), я могу просто коснуться кончика маленького круга и изменить его цвет.
2) удалите два больших круга слева и справа от центрального. Однако это помещает состояние наведения на большой прямоугольник встраиваемого объекта, а НЕ на сам круг.
3) измените все на относительное позиционирование, все перепуталось, но состояние наведения круга работает правильно, а поле встроенного объекта становится квадратным.
Кажется, это сводится к абсолютному позиционированию. Однако я не могу использовать относительное, потому что теряю масштабируемость и невозможно позиционировать элементы (по крайней мере, для меня).
Кто-нибудь знает, что я делаю неправильно? Боже, я просто хочу 3 круга в ряд с возможностью наведения! Почему это так сложно!?
