Create intersection of lines and circle using SVG and CSS - css

Question

I am using google maps for interactive map. There is a limiatation the markers will always be a circle. I need circle along with intersection of 2 lines as shown below.
I dont have access to anything except CSS. Would it be possible to add CSS so I can get intersection of lines along SVG circle.
Here is my JSfiddle code where I tried to add lines to SVG circle.
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

I think it's impossible or too hard, but I made sample code for this.
I use inline svg at filter property of circle element.
When I tested, this code worked fine at firefox only, not at chrome.
(I don't know this sample is useful for using google maps.)
see 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");
}