如何在svg上停止蒙版?

好吧,我有一个svg,我在illustrator中创建并在编辑器中打开,所以我可以得到路径。然后我应用了一个过滤器。

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

enter image description here

这有什么问题吗?

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

解决方案:

看起来你的SVG从容器的底部掉了出来。

你需要以确保这种情况不会发生的方式导出你的SVG。解决这个问题的一个方法是使用 viewBox 属性(见 此处).

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

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

至于为什么调整第3和第4个数字没有得到你想要的结果,嗯……

viewBox’属性指定了用户空间中的一个矩形,它应该被映射到由给定元素建立的视口边界上。

引自 此处

换句话说,按照我的理解,你给定的元素所建立的视口太小,无法容纳模糊的扩散;无论你把视口做得多大,都无法容纳 viewBox,它仍然是将那个矩形空间映射到父元素的大小约束中。

或者,也许是别的什么原因……? 😀谁知道呢。

无论如何,你会希望在从Illustrator导出的SVG中容纳这个模糊半径。要做到这一点,将图形的内脏放置在一个足够大的矩形内,以封装图形和它的模糊扩散。移除该封装矩形的笔触填充,并将整个混乱的图形分组。将该组导出为SVG。

我不用Illustrator了,但类似这样的东西应该可以让你去做。Illustrator可能有一些选项,你可以调整一下关于 viewBox 属性,所以在导出时要注意。

祝您好运!

专业提示。 你的图形有多大并不重要,因为它是基于矢量的。你可以以100px乘100px的尺寸导出它,这样就可以了。随后你可以通过设置它的宽度和高度来控制它的显示大小(或者通过CSS来调整SVG的大小,或者其他方法)。

这里有一些好东西。对SVG视图框的宽度和高度等问题感到困惑。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

嘲笑jestjs中的嵌套函数

2022-9-8 14:07:18

未分类

连接两个表,一个是父子层次结构,输出的行数比表1多。

2022-9-8 14:07:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索