Как перестать маскироваться на SVG?

Question

Хорошо, у меня есть svg, который я создал в иллюстраторе и открыл в редакторе, чтобы я мог получить путь. Затем я применил фильтр:

#center {
  justify-content: center;
  width: 400px;
  position: relative;
  overflow: visible;
}

#inner {
  width: 400px;
  transition-timing-function: ease-in-out;
  transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  -moz-transition: transform 0.4s;
  -o-transition: transform 0.4s;
  overflow: visible;
}

#center #svgContainer {
  perspective: 20px;
  overflow: visible;
}

<div id="svgContainer">
  <div id="inner">
  <svg>
    <defs>
      <filter id="Blur"><feGaussianBlur stdDeviation="19" /></filter>
      <g id="Img"><path class="cls-1" d="M9.5,204.08q26.14-10,51.48-22,24.65-11.67,48.32-25.21,11.83-6.78,23.39-14c8.05-5,20.78-11.32,17.8-23-1.5-5.85-6.76-8.72-11.92-10.78-4.25-1.7-8.54-3.3-12.84-4.86q-13.14-4.74-26.54-8.69A490.14,490.14,0,0,0,44.6,83.09a22.13,22.13,0,0,1-4.66-1.25l1.79.76A12.55,12.55,0,0,1,40.56,82c-.28-.16-1.46-1-.27-.11s.12,0-.12-.24c.84,1.15,1.06,1.41.65.79a5.28,5.28,0,0,1-.27-.53l.75,1.79a7.3,7.3,0,0,1-.37-1.29l.27,2a7.1,7.1,0,0,1,0-1.22l-.27,2a8.33,8.33,0,0,1,.54-2L40.69,85a14,14,0,0,1,1.05-1.85c.55-.87-.32.27-.4.48a4.14,4.14,0,0,1,.68-.79c.8-.89,1.65-1.75,2.52-2.57s1.79-1.57,2.71-2.33c.65-.53-1.6,1.2-.47.38l.6-.45c.51-.36,1-.72,1.54-1.07a76.74,76.74,0,0,1,12.77-6.67l-1.79.76c8.91-3.76,18.29-6.5,27-10.77A17.82,17.82,0,0,0,94,53.87a11.27,11.27,0,0,0,.09-11.74c-1.71-2.82-4.56-4.46-7.27-6.17-2.11-1.34-4.19-2.73-6.2-4.23-.38-.28-1-.89.53.42-.31-.27-.64-.52-1-.78q-.8-.66-1.56-1.35a37.89,37.89,0,0,1-2.89-2.92l-.53-.63c-.19-.22-1-1.21-.19-.2s0-.05-.14-.23-.39-.57-.58-.86a23.21,23.21,0,0,1-1.83-3.45l.76,1.8A23.43,23.43,0,0,1,71.7,17.8l.27,2a19.79,19.79,0,0,1,0-5.1l-.27,2a17.15,17.15,0,0,1,1-3.79L72,14.68a14,14,0,0,1,.79-1.6c.34-.58,1.61-2.22.06-.27A8.13,8.13,0,0,0,75,7.51a7.66,7.66,0,0,0-2.2-5.31A7.54,7.54,0,0,0,67.54,0c-1.86.08-4.09.67-5.3,2.19a25.09,25.09,0,0,0-4,6.7,23.1,23.1,0,0,0-1.35,6.15,25.58,25.58,0,0,0,1.34,11.07c2.89,8.33,9,14.38,16,19.43,1.63,1.18,3.32,2.28,5,3.36.78.5,1.58,1,2.36,1.48a3.78,3.78,0,0,0,.6.41c-.18,0-1.36-1.22-.69-.5.12.12.24.26.37.37.52.47-1.07-1.61-.49-.52l-.76-1.79a4.85,4.85,0,0,1,.31,1l-.27-2a4.39,4.39,0,0,1,0,1l.27-2a5.9,5.9,0,0,1-.23.92l.75-1.79c-.17.4-.44.75-.63,1.15.67-1.42.92-1.12.25-.47l-.55.49c1-.74,1.25-1,.78-.61s-.72.48-1.1.7a42.55,42.55,0,0,1-4.8,2.22l1.79-.76c-9.76,4.09-19.95,7.15-29.4,12a61.8,61.8,0,0,0-13.38,9.09,31.65,31.65,0,0,0-6.17,7.15,13.68,13.68,0,0,0-.73,13.18c2.76,5.73,9.35,7.41,15.05,8.38q9.11,1.55,18.14,3.46,18.06,3.83,35.78,9.1a380,380,0,0,1,39,13.54l-1.79-.75a24.46,24.46,0,0,1,3,1.59c.7.41-1.25-1.11-.7-.54.19.2.4.4.61.59.77.72-.66-.7-.56-.73a5,5,0,0,1,.46.89l-.76-1.8a6.36,6.36,0,0,1,.34,1.35l-.27-2a6.1,6.1,0,0,1,0,1.35l.27-2a8,8,0,0,1-.37,1.29l.76-1.79a11,11,0,0,1-.56,1.08c0,.06-.31.37-.3.44s1.09-1.29.62-.8c-.67.69-1.32,1.34-2,2-.95.83,1.34-1,.31-.24l-1.08.73-2.88,1.85q-5.36,3.4-10.77,6.73-10.92,6.71-22.1,13-22.23,12.53-45.34,23.42Q39.3,175.79,26,181.41l1.79-.76q-11.07,4.66-22.29,9A8.16,8.16,0,0,0,1,193.06a7.68,7.68,0,0,0-.76,5.78c1.16,3.56,5.31,6.74,9.23,5.24Z"/>
      </g>
    </defs>
    <use style="fill:pink;" filter="url(#Blur)" xlink:href="#Img"
      transform="translate(0,0)"/>
    <use style="fill:white;" xlink:href="#Img"/>
    </svg>
  </div>
</div>

Это замечательно, за исключением случаев переполнения: видимые и изменяющиеся размеры div, я получаю svg в маске:

Что здесь не так? обновлено:

<svg svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -70 800 1081">

Answer 1

Похоже, что ваш SVG падает на дно своего контейнера.

Вы захотите экспортировать SVG так, чтобы этого не происходило. Одним из способов решения этой проблемы является использование атрибута viewBox (см. здесь ).

viewBox = {min-x} {min-y} {width} {height}

В моем приведенном ниже файле с ускоренным построением вы увидите, что атрибут viewBox моего SVG установлен на "0 0 417 376". Его ширина и высота установлены на одинаковые размеры соответственно.

Почему настройка 3-го и 4-го чисел не дает желаемого результата, хорошо ...

Атрибут 'viewBox' определяет прямоугольник в пользовательском пространстве, который должен быть сопоставлены с границами области просмотра, установленной данным элементом.

Цитируется с здесь

Другими словами, насколько я понимаю, область просмотра установлена по вашему заданному элементу слишком мало, чтобы приспособиться к распространению размытия; независимо от того, насколько велик размер viewBox, он все равно отображает прямоугольное пространство angular в ограничениях размера родительского элемента.

Или, может быть, что-то еще ...? Knows Кто знает.

В любом случае вы захотите разместить этот радиус размытия внутри SVG, который вы экспортируете из Illustrator. Для этого поместите кишки вашего графика c в прямоугольник, достаточно большой для инкапсуляции графика c и его размытия. Удалите обводку / заливку этого инкапсулирующего прямоугольника и сгруппируйте весь беспорядок вместе. Экспортируйте эту группу как SVG.

Я больше не пользуюсь Illustrator, но что-то подобное должно помочь вам. В Illustrator могут быть параметры, которые можно настроить с учетом атрибута viewBox, поэтому следите за этим при экспорте.

Удачи!

Pro-tip: Не имеет значения, насколько велика ваша графика c, поскольку она основана на векторах. Вы можете экспортировать его в 100x на 100px, и это будет хорошо. Впоследствии вы можете управлять размером дисплея, задав его ширину и высоту явно (или выбрав SVG с помощью CSS или любым другим).

Некоторые полезные вещи: Озадачен SVG viewBox, width, высота, эт c

<div id="svgContainer">
  <div id="inner">
    <svg width="417" height="376" viewBox="0 0 417 376" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_df)">
        <path d="M198.5 70C193.667 77.8333 193.4 89 205 101C216.6 113 224.5 116.5 223.5 122.5C222.5 128.5 169.148 137.338 156 164.5C150.675 175.5 309 198.947 291 217C273 235.053 215.166 273.072 126 305.5" stroke="white" stroke-width="20" stroke-linecap="round" />
      </g>
      <path d="M198.5 70C193.667 77.8333 193.4 89 205 101C216.6 113 224.5 116.5 223.5 122.5C222.5 128.5 169.148 137.338 156 164.5C150.675 175.5 309 198.947 291 217C273 235.053 215.166 273.072 126 305.5" stroke="white" stroke-width="20" stroke-linecap="round" />
      <defs>
        <filter id="filter0_df" x="67.9971" y="11.9986" width="282.433" height="351.504" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="24" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
          <feGaussianBlur stdDeviation="8" result="effect2_foregroundBlur" />
        </filter>
      </defs>
    </svg>
  </div>
</div>