SVG stroke only in one direction - svg

Question

Currently, I have the following svg:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
<g class="background" stroke-width="3" fill="transparent">
<circle cx="40" cy="40" r="39" stroke="black" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
<circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
</g>
</svg>
http://jsfiddle.net/r5HYK/1/
As you can see, there is the black circle with some "corners" added (dunno how to call that in English). But these "corners" are both outside and inside the circle, but I want to have them only inside. To see how it should look like, you can add the out-commented circle to the svg.
But this solution does not work for me since this svg should be included into a bigger svg file, where the circle to remove the outer "corners" would be visible itself.
So I am searching for something that removes this outer "corners" (maybe a filter?), but does not have any other effect.
Another solution would be a one-sided stroke, since the stroke is expanded to both sides at the moment, but I currently do not know whether this even exists.
Any suggestions?

Answer 1

A clipPath is what you want. You can just clip away everything outside the circle.
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
<defs>
<clipPath id="clip1">
<circle cx="40" cy="40" r="39" fill="black" />
</clipPath>
</defs>
<g class="background" stroke-width="3" fill="transparent" clip-path="url(#clip1)">
<circle cx="40" cy="40" r="39" stroke="black" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
<circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
</g>
</svg>