[解決済み] SVGのストロークが一方向のみ

質問

現在、以下のような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/

ご覧のように、黒い円にいくつかのquot;corner"（英語ではどう呼ぶのか分かりません）が追加されています。しかし、このquot;corner"は、円の外側と内側の両方にありますが、私は内側だけにしたいのです。どのように見えるかを見るには、コメントアウトされた円をsvgに追加してください。

しかし、このsvgはより大きなsvgファイルに含まれ、外側の"corner"を削除する円はそれ自体が見えるはずなので、この解決策は私には使えません。 そこで、この外側の"corner"を削除するもの（多分、フィルターか）を探しているのですが、他の効果はありません。 他の解決策としては、現時点ではストロークが両側に拡張されているため、片側ストロークが考えられますが、これが存在するかどうかさえ現在わかりません。

何かご提案があればお願いします。

解決方法は？

clipPathが欲しいところです。円の外側をすべて切り取ることができます。

<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>