定位滑块的svg图标

Question

我刚刚开始使用svg图像，我正在努力解决这个问题。

我选择在选择课程时尝试将svg图像设为白色并带有红色圆圈背景。

这是一个小提琴http://jsfiddle.net/digitalk/0L8nc3pu/2/

我似乎无法获得圆圈和交叉对齐

.pagination {
    position:relative;
}
.pagination ul {
    position:absolute;
    bottom:50px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);



}
.pagination ul li {
    display: inline-block;
    height:10px;
    width:10px;
    padding:10px;
}
.selected {
    background:rgb(192,0,0);
    height:10px;
    width:10px;
    border-radius: 50%;
}
.dave path {
    fill: #76665e !important;   
}
 .selected .dave path {
    fill: white !important;
}

由于