使用SVG和CSS创建线和圆的交集

Question

我正在使用谷歌地图进行交互式地图。有一个限制标记将永远是一个圆圈。我需要圆圈和2条线的交点，如下所示。

除了CSS，我无权访问任何内容。是否可以添加CSS以便我可以沿着SVG圈获得相交的行。

这是我的JSfiddle代码，我试图在SVG圈中添加行。

http://jsfiddle.net/sreeram62/8QRAJ/

<svg height="210" width="500">
     <circle cx="50" cy="50" r="5" stroke="black" stroke-width="0" fill="#00FFFF" />
  Sorry, your browser does not support inline SVG.
</svg>

circle:after {
    content: '';
    display: block;
    height: 1px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: -125px;
    background-color: #f00;
}

circle:before {
    content: '';
    display: block;
    height: 300px;
    width: 1px;
    position: absolute;
    left: 50%;
    top: -125px;
    background-color: #f00;
}

Answer 1

我认为这不可能或太难，但我为此制作了示例代码 我在circle元素的filter属性中使用了内联svg 当我测试时，这个代码只在firefox上工作正常，而不是在chrome （我不知道这个示例对于使用谷歌地图很有用。）

请参阅http://jsfiddle.net/defghi1977/39gjd/

SVG：

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <circle cx="100" cy="100" r="10" fill="red"/>
</svg>

的CSS：

circle{
    filter: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><defs><filter id='f' x='-3' y='-3' width='7' height='7' primitiveUnits='objectBoundingBox'><feFlood flood-color='black' x='-3' y='0.45' width='7' height='0.1' result='hb'/><feFlood flood-color='black' x='0.45' y='-3' width='0.1' height='7' result='vb'/><feMerge><feMergeNode in='SourceGraphic'/><feMergeNode in='hb'/><feMergeNode in='vb'/></feMerge></filter></defs></svg>#f");
}