Question

好吧，我有一个在illustrator中创建并在编辑器中打开的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属性（请参见here）。

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

在下面我的匆忙构建的示例文件中，您将看到我的SVG的viewBox属性设置为"0 0 417 376"。其宽度和高度分别设置为相同的尺寸。

关于为什么调整第三个和第四个数字没有得到想要的结果，嗯...

“ viewBox”属性在用户空间中指定一个矩形，该矩形应映射到由给定元素建立的视口的边界。

引自here

换句话说，据我所知，您给定元素建立的视口太小，无法容纳模糊的扩散；无论您制作viewBox有多大，它仍会将矩形空间映射到父元素的大小约束中。

或者，也许还有其他...？ ?谁知道。

无论如何，您都希望在从Illustrator导出的SVG中容纳该模糊半径。为此，将图形的内脏放置在足够大的矩形内，以封装图形及其模糊扩展。删除该封装矩形的笔触/填充，并将整个混乱组合在一起。将该组导出为SVG。

我不再使用Illustrator，但是类似的东西应该可以帮助您前进。 Illustrator可能具有一些可以针对viewBox属性进行调整的选项，因此在导出时请注意。

祝你好运！

专业提示：图形的大小与矢量无关，因为图形是基于矢量的。您可以将其导出为100px x 100px，这样就可以了。随后，您可以通过显式设置其宽度和高度（或通过使用CSS调整SVG的大小）来控制其显示大小。

这里有一些好东西： Perplexed by SVG viewBox, width, height, etc

<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>

如何停止对SVG的屏蔽？

1 个答案: