Блог

Главная - Вопросы по программированию - Присвоить шаблон всей странице, но показывать его только на некоторых фигурах, остальные должны быть черными

Присвоить шаблон всей странице, но показывать его только на некоторых фигурах, остальные должны быть черными

#css #svg #textures #mask

#css #svg #Текстуры #маска

Вопрос:

Я хотел бы создать веб-страницу, где фон плоский черный, но мне нужно добавить также фоновый шаблон, который должен быть виден только внутри некоторых фигур (круги в этом простом примере, но они будут сложным контуром, разным для каждого раздела).

Я знаю, что мог бы назначить шаблон фигурам, но мне нужно также анимировать фигуры, а анимировать шаблон невозможно.

Вот мой начальный код

Я применил текстуру в CSS ко всей странице и добавил несколько кругов. Теперь мне нужно «скрыть» текстуру везде, кроме как внутри фигур. И фон страницы должен быть черным. Как я могу это сделать?

Комментарии:

1. Не совсем уверен, чего бы вы хотели добиться, но почему бы вам не сделать наоборот — разместить шаблон только внутри фигур?

2. @Азу так тебе. Я думал об этом, но я не могу, потому что в будущем, когда использование прокручивается между разделами, фигуры должны выполнять морфологический переход (положение, цвет и рисунок), который я не считаю возможным

3. Нарисуйте прямоугольник черного фона, затем то, что вы хотите, вообще не используя шаблон, и используйте контур вырезки, чтобы показать фрагменты материала, который вы хотите отобразить.

4. @RobertLongson так ты хочешь сделать шаблон в svg? Большой длинный svg

5. Я имею в виду, если что-то не повторяется, шаблон вообще не является правильным ответом.

Ответ №1:

Это то, что вам нужно?

 /* hide the SVG */
svg#pattern {
  position: absolute;
  left: -9999px;
}


body {
  background-color: black;
  height: 2000px;
  color: white;
}

section {
  height: 400px;
}

circle {
  animation: throb 1s infinite;
}

@keyframes throb {
  0% { r: 48px; }
  50% { r: 30px; }
  100% { r: 48px; }
} 
 <svg id="pattern">
  <defs>
    <pattern id="check" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="linen"/>
      <rect width="5" height="5" fill="black"/>
      <rect x="5" y="5" width="5" height="5" fill="black"/>
    </pattern>
  </defs>
</svg>


<div>
  <h1>Test page</h1>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>
      
</div>

Ответ №2:

 body {
    background-color: black;    
}
.container {
    opacity: 0.8;
        background-image: linear-gradient(135deg, black 25%, transparent 25%), linear-gradient(225deg, black 25%, transparent 25%), linear-gradient(45deg, black 25%, transparent 25%), linear-gradient(315deg, black 25%, #e5e5f7 25%);
        background-position: 10px 0, 10px 0, 0 0, 0 0;
        background-size: 10px 10px;
        background-repeat: repeat;
        width:200px;
        height:200px;
} 
 <div class="container" style='clip-path: url("#test");'></div>
    
<svg x="0" y="0" width="0" height="0">
    <clipPath id="test">
    <circle cx="100" cy="100" r="20" fill="red"></circle>
    </clipPath>
</svg>

Комментарии:

1. Спасибо, но фон должен быть черным. Все, что находится за пределами круга, должно быть черным, фигура должна быть заполнена с помощью шаблона

2. Я изменил фон на черный.

3. Мне нужно что-то более сложное. Положение круга / фигуры не должно быть таким фиксированным, это зависит от содержимого страницы, и я думаю, что с помощью этого решения невозможно выполнить морфологический переход

Метки: , ,