Скрыть часть формы с прозрачностью?

Есть ли способ скрыть часть того, что вы нарисовали в SVG, не нарисуя на ней другую форму?Скрыть часть формы с прозрачностью?

Например, я пытаюсь создать пустой круг с срезом, вырезанным из одной части. Я смог добиться желаемого вида, но изображение не прозрачно на фрагменте, который я хочу скрыть. Если я изменю цвет фона на странице, на которой он включен, мне тоже придется менять цвет прямоугольника.

Я посмотрел на отсечение SVG, но похоже, что это скрывает то, что находится за пределами области, пока я ищу сделать инверсию. Неужели я ошибаюсь?

<svg width="60" height="60"> 
 
    <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" /> 
 
    <rect height="8" width="22" y="26" fill="lightblue"/> 
 
</svg>

источник

2016-09-24 spencer.sm

насчет булевой операции? Нарисуйте свой круг, нарисуйте прямоугольник, затем вычтите прямоугольник из круга. – enhzflep

Можете ли вы указать мне в правильном направлении, чтобы узнать, как это сделать? –

Ну, используя Inkscape, я бы сделал следующее. (0) Нарисуйте круг 48px (1), нарисуйте круг 32px. Выберите большую, а затем вычтите из нее меньшую. Это даст вам черный путь (который выглядит как круг с довольно толстым ударом) (2) Нарисуйте прямоугольник (3) Выберите круг и вычтите из него прямоугольник. – enhzflep

То, что я искал был SVG mask.

мне пришлось создать маску на круг, который состоял из двух частей:

белый прямоугольник, который охватывает весь образ (белый: шоу)
Черный прямоугольник, что я хотел скрыть (черный: скрыть)

Код, показанный ниже.

<svg width="60" height="60"> 
 
    <defs> 
 
    <mask id="slice"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <rect height="8" width="22" y="26" fill="black"/> 
 
    </mask> 
 
    </defs> 
 
    <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" mask="url(#slice)"/> 
 
</svg>

источник

2016-09-24 19:17:40

Похож на короткое, сжатое решение. Еще лучше, один, который вы смогли извлечь. (и я мог бы добавить, намного лучше, чем тот, который я должен был предложить) Браво! – enhzflep

Может быть, вы хотите использовать arc?

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400" 
 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    
 
    
 
<path xmlns="http://www.w3.org/2000/svg" d="M 225,225 a150,150 0 1,1 0,100" fill="none" stroke="red" stroke-width="25"/> 
 
</svg>

источник

2016-09-24 19:18:19

Скрыть часть формы с прозрачностью?

ответ

Смежные вопросы