如何用CSS解决SVG图像的焦点问题
如何用CSS解决SVG图像的焦点问题
提问于 2022-04-09 20:47:42
我有Svg图像，这是外层，在里面我有其他的div，然后文本，我有固定的定位。我的悬停和其他效果很好，但当我试图增加焦点，然后它工作，但有太多的空间周围。现在，当我在元素上标签(键盘)时，它看起来是这样的(下图)。
我的守则：
<template>
<div class="markar-container">
<button class="btn-focus" @focus="true", @blur="false">
<div class="markar-items">
<UnionIcon class="union-layer" /> // this is the svg image I have imported
<div class="color-layer">
<div class="text">AA</div>
</div>
</div>
</button>
</div>
</template>
// My CSS styling:
.markar-items {
position: relative;
}
.union-layer {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
transition: all 0.2s ease-in-out;
}
.color-layer {
height: 50px;
width: 50px;
border-radius: 35px;
background: #3ac371;
position: absolute;
top: 9px;
left: 16px;
transition: all 0.2s ease-in-out;
/* transform: translate(-50%, -50%); */
}
.text {
position: absolute;
left: 12px;
top: 13px;
font-size: 19px;
color: white;
}
button:focus {
outline: none;
}
.btn-focus:focus .union-layer {
border-style: dashed;
border-width: 3px;
/* border-radius: 50%; */
outline: none;
}
.btn-focus:focus .color-layer {
background: #9f1853;
}
// also tried targetting the svg selector, but didnot help
.btn-focus:focus > svg.dl-svg-path {
border-style: dashed;
outline: none;
}//如何实现下面的边框样式在白色圆圈中飞驰：
回答 1
Stack Overflow用户
发布于 2022-04-10 06:09:58
我认为您在正确的轨道上，但CSS选择器和属性是不正确的。因此，焦点(和悬停)在按钮上是好的，并将产生良好的效果。CSS选择器需要“树中的任何位置”，因此只需在.btn-focus:focus和circle.dot之间留出一个空间。
对于<circle>上的虚线笔画，您需要stroke-dasharray。
原始代码：
h1 {
color: blueviolet;
}
.markar-container {
box-sizing: border-box;
}
.markar-items {
border: 2px solid red;
}
.btn-focus:hover circle.dot,
.btn-focus:focus circle.dot {
fill: #9f1853;
}
.btn-focus:hover circle.outline,
.btn-focus:focus circle.outline {
stroke-dasharray: 1;
}
text {
pointer-events: none;
}
button:focus {
outline: none;
}<input type="text" placeholder="Just here to get focus" />
<div class="markar-container">
<button class="btn-focus">
<h1>Pin</h1>
<div class="markar-items">
<svg width="70" height="70" viewBox="0 0 10 10" style="display: block;">
<rect width="10" height="10" fill="yellow"/>
<circle class="outline" cx="5" cy="5" r="4" fill="white" stroke="gray" stroke-width=".3" />
<circle class="dot" cx="5" cy="5" r="3.5" fill="green" />
<text font-size="4" fill="white" x="5" y="5" text-anchor="middle" dominant-baseline="middle">AA</text>
</svg>
</div>
</button>
</div>
更新
如何使用:active：应用于:active的样式可以/将覆盖:hover和:focus中定义的样式。对于stroke-dasharray，您可以给它另一个值，或者简单地将它设置为none
h1 {
color: blueviolet;
}
.markar-container {
box-sizing: border-box;
}
.markar-items {
border: 2px solid red;
}
.btn-focus:hover circle.dot,
.btn-focus:focus circle.dot {
fill: #9f1853;
}
.btn-focus:hover circle.outline,
.btn-focus:focus circle.outline {
stroke-dasharray: 1;
}
.btn-focus:active circle.dot {
fill: lime;
}
.btn-focus:active circle.outline {
stroke-dasharray: none; /* override style on :focus and :hover*/
stroke: black;
}
text {
pointer-events: none;
}
button:focus {
outline: none;
}<input type="text" placeholder="Just here to get focus" />
<div class="markar-container">
<button class="btn-focus">
<h1>Pin</h1>
<div class="markar-items">
<svg width="70" height="70" viewBox="0 0 10 10" style="display: block;">
<rect width="10" height="10" fill="yellow"/>
<circle class="outline" cx="5" cy="5" r="4" fill="white" stroke="gray" stroke-width=".3" />
<circle class="dot" cx="5" cy="5" r="3.5" fill="green" />
<text font-size="4" fill="white" x="5" y="5" text-anchor="middle" dominant-baseline="middle">AA</text>
</svg>
</div>
</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71811789
复制相关文章
相似问题
腾讯云开发者
