Html 当我使用svg行时，为什么在div附近会出现一个未识别的段？

我有一个svg元素，它位于两个具有圆形边缘的div元素之间。div和svg行显示正确，但由于某种原因，当我将鼠标悬停在div上时，每行的左下角会出现一条黑色的小线段，当我停止悬停时，它会消失。这只是Chrome的一个问题，而不是IE。我如何摆脱黑色部分

<style>


#main_item_list{
    list-style-type: none; 
    position: absolute; 
    padding-left: 0px;
}

.ListItemContainer{margin-bottom: 20px;}


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 39px; 
    width: 360px; 
    height: 46px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
    display: inline-block;
}

.opaqueBlockSubBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 60px; 
    width: 220px; 
    height: 36px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
}

.formTextSpan{
    position: absolute; 
    z-index: 1; 
    margin-left: 23px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.formTextSpanSubItem{
    position: absolute; 
    z-index: 1; margin-left: 23px; 
    color: white; 
    margin-top: 5px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 20px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #ADDBFF;
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: .7; 
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: relative;
    left: 43px;
    top: -18px;
    stroke: white;
}


</style>




<div id="TechBackgroundContainer" style="background-color: lightseagreen; height: 300px;">


<ul id="main_item_list">

    <li id="DotItem1" class="ListItemContainer">
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon1"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Internal Communication</span></div>
        </a>
    </li>

    <li id="DotItem2" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon2"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Reports Package</span></div>
        </a>
    </li>

    <li id="DotItem3" class="ListItemContainer">    
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon3"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Talking Points</span></div>
        </a>    

    </li>

</ul>


</div>
</div>

#主要项目清单{
列表样式类型：无；
位置：绝对位置；
左侧填充：0px；
}
.ListItemContainer{margin bottom:20px；}
.乳白色块{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
左边距：39像素；
宽度：360px；
高度：46px；
背景色：rgba（72,97,115,0.6）；
边界半径：10px；
显示：内联块；
}
.opaqueBlockSubBlock{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
左边距：60像素；
宽度：220px；
高度：36px；
背景色：rgba（72,97,115,0.6）；
边界半径：10px；
}
.formTextSpan{
位置：绝对位置；
z指数：1；
左边距：23px；
颜色：白色；
边缘顶部：7px；
字体系列：“Didact哥特式”！重要；
字体大小：23px！重要；
}
.FormTextSpan子项{
位置：绝对位置；
z指数：1；左边距：23px；
颜色：白色；
边缘顶部：5px；
字体系列：“Didact哥特式”！重要；
字体大小：20px！重要；
}
.dotIcon{
高度：30px；
宽度：30px；
背景色：#ADDBFF；
位置：绝对位置；
左边距：13px；
边缘顶部：7px；
边界半径：15px；
不透明度：.7；
盒影：0 0 10px 1px白色；
}
dotLine先生{
位置：相对位置；
左：43像素；
顶部：-18px；
笔画：白色；
}

在CSS中添加以下行：

#主要项目(列表a{
文字装饰：无；
}