Образец изображения в SVG показывает растянутую траекторию - PullRequest
Новая
       39

Образец изображения в SVG показывает растянутую траекторию

0 голосов
/ 12 октября 2019

У меня есть прямоугольный элемент div, в который я добавил background-color и background-image с повторным включением, чтобы полупрозрачное изображение сливалось с цветом фона и создавало красочный узорчатый фон для моего контента. Я взял шаблон из SubtlePatterns , который: 300px × 295px в измерении. Вот код: 

#nd {
    background-image: url('../images/dark-mosaic.png');
    background-color: #b33939;
    color: #fff;
}

Теперь я хотел сделать резкий прямоугольник более плавным, поэтому я взял SVG-разделитель из этой ссылки . Использовал этот ответ , чтобы создать фоновое изображение пути SVG. Со следующим кодом: 

<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="300" height="295">
            <image xlink:href="{{ asset('images/dark-mosaic.png') }}" x="0" y="0" width="300" height="295" />
        </pattern>
    </defs>
    <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#img1)"></path>
</svg>

Я получил форму SVG с растянутым / заполненным фоновым изображением:

Dark Mosaic Pattern to the SVG

I обратился по этой ссылке и установил атрибут ширины и высоты тега <image> в ширину и высоту файла изображения, но мне не удалось.

Теперь у меня два вопроса:

  • Как я могу сделать фоновое изображение мозаичным, точно так же, как прямоугольник?
  • Как я могу поместить цвет заливки в фигуру, чтобы SVG-образец совпал с рисунком в прямоугольнике?

1 Ответ

1 голос
/ 12 октября 2019

Вместо использования элемента section и svg и попытки сопоставить шаблон для обоих элементов, вы можете использовать только section и clipPath, чтобы обрезать section, как вам нужно.

Путь к «шаблону», который я использую, имеет fill = "black". section имеет background-color: skyBlue;

Обратите внимание, что clipPath использует clipPathUnits="objectBoundingBox", а атрибут d имеет значения от 0 до 1. 

#nd {
  height:300px;
  background-color:skyBlue;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='black'%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");
   -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">  
            <path d="M0 .5 C .20 0 .50 0 1 .5 v.5H0Z"></path>
        </clipPath>
      </defs>
</svg>
<section id="nd"></section>

Для background-image я использую данные data: Uri, но вы можете использовать внешнее изображение.

Если вы посмотрите на svg, использованный в качестве изображения, вы увидите это (не шаблон!). Поскольку css по умолчанию повторяет изображение, вам не нужен шаблон, просто изображение, которое повторяется. 

<svg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g fill="black">
        <rect x='0' y='0' width='20' height='20'/>
        <rect x='20' y='20' width='20' height='20'/>
    </g>
</svg>

Надеюсь, вы найдете это полезным.

...