3

Не могу разобраться с одной проблемой. Я рисую различные элементы : геометрические фигуры, текст и прочее используя svg.
Данные о том какие элементы отрисовывать берутся динамически из БД. Область в которой отрисовываются элементы должны быть строго ограничена, допустим, 100х100px. Т.е если какие-то, динамически генерируемые элементы, вылезают за эту область, то они должны просто обрезаться. В результате поисков в гугле, мной был обнаружен тег clipPath,который решил проблему с обрезанием элементов, выходящих за допустимую область, но был обнаружен следующий недостаток, с которым не удалось справиться: Пример:

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">

<clipPath id="myClip">
      <circle cx="30" cy="30" r="20" fill="red"/>
      <circle cx="60" cy="55" r="20" fill="blue"/>
      <circle cx="80" cy="90" r="20" fill="green"/>
    </clipPath>


<rect x="10" y="10" width="100" height="100"
      clip-path="url(#myClip)"/> -->
</svg>

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

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
astonone
  • 83

3 Answers3

3

Вопрос заключается в том, как избавиться от этой проблемы и сохранить стили элементов, обернутых тегом clipPath?

К сожалению применять стили к clipPath бесполезно. Так как clipPath работает как ножницы или пуансон штампа - вырезает из подложки кусочки, в вашем случае кружки и их цвет зависит от цвета подложки то есть - прямоугольника. Если прямоугольник будет красного цвета, то и кружки будут красного цвета. 

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">

<clipPath id="myClip">
      <circle cx="30" cy="30" r="20" fill="red"/>
      <circle cx="60" cy="55" r="20" fill="blue"/>
      <circle cx="80" cy="90" r="20" fill="green"/>
    </clipPath>


<rect x="10" y="10" width="100" height="100"
      clip-path="url(#myClip)" fill="red"/> 
</svg>

Если подложка картинка, то результат будет - вырезанные круги с фрагментами картинки.

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • 1
    Да, спасибо, к счастью удалось решить проблему самостоятельно т сохранить стили с помощью хака, который я описал выше) – astonone Aug 14 '17 at 06:29
3

Область в которой отрисовываются элементы должны быть строго ограничена, допустим, 100х100px. Т.е если какие-то, динамически генерируемые элементы, вылезают за эту область, то они должны просто обрезаться

Прочитал ещё раз ваш вопрос. В первом ответе я зациклился на стилях clip-path и поэтому не обратил должного внимания на эту часть вопроса.

Если вам нужно просто вырезать область 100х100px, то самым простым решением может быть использование viewport и viewBox Более подробно тут и тут

<svg width="100" height="100" viewBox="0 0 100 100"  xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey">

<circle cx="30" cy="30" r="20" fill="red" />
   <circle cx="60" cy="55" r="20" fill="blue" />
   <circle cx="80" cy="90" r="20" fill="green" /> 
</svg>

Серая рамка показывает область обрезки - viewBox Показана для наглядности, если мешает, то удалите из шапки файла - style="border:1px solid grey"

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
2

Проблема решена, тег использовался не правильно. Вот верное решение:

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
   <circle cx="30" cy="30" r="20" fill="red" clip-path="url(#myClip)"/>
   <circle cx="60" cy="55" r="20" fill="blue" clip-path="url(#myClip)"/>
   <circle cx="80" cy="90" r="20" fill="green" clip-path="url(#myClip)"/>

<clipPath id="myClip">
    <rect x="10" y="10" width="70" height="70"/>
</clipPath>


</svg>
astonone
  • 83