Заполните форму неповторяющимся рисунком: нежелательная контурная линия - PullRequest
Новая
       28

Заполните форму неповторяющимся рисунком: нежелательная контурная линия

0 голосов
/ 04 апреля 2019

В моем приложении Angular пользователь может вставить изображение в форму SVG и применить преобразование к изображению в интерактивном режиме. По умолчанию изображение заполняет форму.

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

  • Форма не имеет обводки
  • Одна сторона изображения намного темнее, чем противоположная

Когда эти условия соблюдены, появляется очень тонкая линия на той стороне фигуры, где изображение светлее. Например, если нижняя часть изображения намного темнее верхней части, в верхней части фигуры появится тонкая линия. Эта линия идет с противоположной стороны изображения, как будто образец пытается повторить. Я знаю, что нет ничего похожего на атрибут no-repeat для шаблонов изображений, поэтому я установил следующие атрибуты шаблонов, чтобы избежать повторения: 

<pattern patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1" ...>

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

Есть ли хороший способ полностью избежать повторения паттернов? Я пытался расширить шаблон так, чтобы он перекрывал форму, но дополнительный размер должен быть несколько значительным, чтобы быть эффективным: 

<pattern x="-0.01" y="-0.01" width="1.02" height="1.02" ...>

Когда я запускаю фрагмент кода ниже в моем браузере Chrome, нежелательная тонкая синяя линия видна в верхней части фигуры. Однако проблема не характерна для Chrome; Я вижу это и в Firefox. 

<div style="padding: 20px; width: 180px; height: 150px; background-color: yellow;">
  <svg height="100%" width="100%" x="0%" y="0%" viewBox="0 0 1600 1200">
    <defs>
      <pattern id="pattern1" patternUnits="objectBoundingBox" 
        preserveAspectRatio="xMidYMid slice" 
        width="1" height="1" x="0" y="0" viewBox="0 0 1600 1200">
        <image width="1600" height="1200" x="0" y="0" 
          xlink:href="https://i.ibb.co/vZ9spGH/1600x1200-1.png"></image>
      </pattern>
    </defs>
    <rect fill="url('#pattern1')" height="100%" width="100%" x="0%" y="0%"></rect>
    </svg>
</div>

1 Ответ

1 голос
/ 05 апреля 2019

Заполнение фигур довольно просто с использованием фильтра: 

<div style="padding: 20px; width: 180px; height: 150px; background-color: yellow;">
  <svg height="100%" width="100%" x="0%" y="0%" viewBox="0 0 1600 1200">
    <defs>
      <filter id="simple-image-fill" primitiveUnits="userSpaceOnUse"> 
      
        <feImage width="1600" height="1200" x="0" y="0" preserveAspectRatio="xMidYMid slice"
          xlink:href="https://i.ibb.co/vZ9spGH/1600x1200-1.png" result="image-res"/>
          <feComposite operator="in" in2="SourceGraphic" in="image-res"/>
      </filter>
    </defs>
    <rect filter="url(#simple-image-fill)" height="100%" width="100%" x="0%" y="0%"/>
    </svg>
</div>
...