svg маска и ограничивающая рамка

Мне нужно применить маску к другим объектам.
Маска должна покрывать весь объект (видимая его часть). Я положил маску внутри одного определенного места, в верхней части страницы, изменил maskContentUnits на objectBoundingBox, поэтому он отлично работал.svg маска и ограничивающая рамка

Но затем возникла проблема.

Я сделал скрипку, чтобы проиллюстрировать эту проблему: http://jsfiddle.net/8qdt7vjr/1/

<body> 
    <svg width="0" height="0"> 
     <defs> 
      <mask id="mask1" maskContentUnits="objectBoundingBox"> 
       <ellipse cx=".5" cy=".5" rx=".5" ry=".5" fill="white" /> 
      </mask> 
     </defs> 
    </svg> 
    <svg class="svg" width="200" height="150" overflow="visible"> 
     <rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" /> 
     <svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)"> 
      <rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" /> 
     </svg> 
     <rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" /> 
    </svg> 
</body>

В этой скрипке я хочу, чтобы применить маску к элементу с SVG id="zzz". Но внутри этого элемента есть элемент rect, который увеличивает zzz 's ограничивающий прямоугольник. В скрипке это rect, но в моем проекте это тег image. zzz имеет переполнение, установленное в скрытое (в скрипке я изменил его на видимое, так что легче увидеть проблему), поэтому у меня есть определенная часть изображения, видимая внутри zzz.

Реальная проблема заключается в том, что «внутреннее увеличивается содержание ZZZ S» ы ограничивающий прямоугольник ZZZ.
В скрипке я хочу, чтобы маска эллипса была внутри красного прямоугольника (видимая zzz), но она внутри зеленого прямоугольника (zzz).

Итак, главный вопрос: есть ли способ достичь этой цели? Маска будет использоваться многими элементами с разными размерами и содержимым, и я не хочу ее клонировать.

Есть ли способ сделать это без клонирования маски внутри каждого элемента?
Есть ли способ уменьшить ограничительную рамку до видимой области?
Есть ли способ показать часть изображения без расширения ограничивающей рамки родителя?
Есть ли другой способ сделать это?

источник

2015-09-19 lazyeugene

Ответ на вторую и третью части не соответствует обоим. Это затрудняет ответ на первый и четвертый случаи. –

Это что-то вроде этого вы пытаетесь достичь?

<body> 
 
    <svg width="0" height="0"> 
 
     <defs> 
 
      <mask id="mask1" maskContentUnits="userSpaceOnUse"> 
 
       <ellipse cx="100" cy="75" rx="100" ry="75" fill="white" /> 
 
      </mask> 
 
     </defs> 
 
    </svg> 
 
    <svg class="svg" width="200" height="150" overflow="visible"> 
 
     <rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" /> 
 
     <svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)"> 
 
      <rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" /> 
 
     </svg> 
 
     <rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" /> 
 
    </svg> 
 
</body>

Может быть, с помощью UserSpaceOnUse вместо ObjectBoundingBox может помочь добиться того, что вы хотите ... В сочетании с вложенными элементами SVG вы можете определить UserSpace использовать и с тем, что часть применяется маска к ...

источник

2015-09-19 10:46:39

Так я использую сейчас. Но в моем случае я не знаю размеров 'svg' с тегом' mask'. На самом деле существует несколько разных элементов с одной и той же маской. Теперь я использую клон оригинальной маски для каждого элемента, и я хочу избежать клонирования. – lazyeugene

userSpaceOnUse - это система координат элемента, к которому применяется маска, а не оттуда. В вашем случае это будет элемент svg родителя zzz. Возможно, вы можете опубликовать exapmle, где userSpaceOn не работает? –

Пример: http://jsfiddle.net/04nz92d9/ Маска не может быть правильно применена к обоим элементам: ** zzz1 ** и ** zzz2 **.С 'maskContentUnits =" objectBoundingBox "это можно сделать легко, но есть проблема с ограничивающей рамкой, расширенной блочным контентом. – lazyeugene

ответ

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