Штрих 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/

Как видите, есть черный кружок с добавленными «уголками» (не знаю, как это назвать по-английски). Но эти «уголки» есть и снаружи, и внутри круга, а я хочу, чтобы они были только внутри. Чтобы увидеть, как это должно выглядеть, вы можете добавить кружок без комментариев в файл svg.

Но это решение не работает для меня, так как этот svg должен быть включен в больший svg-файл, где был бы виден сам круг для удаления внешних «углов». Поэтому я ищу что-то, что удаляет эти внешние «углы» (может быть, фильтр?), но не имеет никакого другого эффекта. Другим решением был бы односторонний штрих, так как на данный момент штрих расширяется в обе стороны, но в настоящее время я не знаю, существует ли он вообще.

Какие-либо предложения?


svg svg-filters
person DerWaldschrat    schedule 09.06.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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>
person Robert Longson    schedule 09.06.2013
comment
А, именно это я и искал, большое спасибо :) Придется поближе познакомиться с SVG - person DerWaldschrat; 09.06.2013