SVG stroke only in one direction

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>