SVG 路径不会作为光滑轮播的蒙版居中

编程问答 2022-04-21

问题描述

我发现了 Fabio Ottaviani 的这款很棒的 CodePen，它采用 SVG Circle 并将其用作当前轮播图像的蒙版。由于jQuery，圆圈完全居中，甚至可以调整大小。但是，当我将圆圈更改为我自己的 SVG 图像路径时，该路径始终位于窗口的左上角。如何将 SVG 路径居中作为图像蒙版？

这是 fabio 的原始 CodePen：

https://codepen.io/supah/pen/JMvEzQ

  <div class="item">
    <svg xmlns="http://www.w3.org/2000/svg" class="original">
      <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/1.jpg?raw=true" mask="url(#donutmask)"></image>
    </svg>

      <svg>
      <defs>
        <mask id="donutmask">
          <circle id="outer" cx="250" cy="250" r="400" fill="white"/>
          <circle id="inner" cx="250" cy="250" r="300"/>
        </mask>
      </defs>
    </svg>

这是我使用 SVG 路径作为掩码的修改版本：

https://codepen.io/applebaumian/pen/ExWzymE

    <svg>
      <defs>
        <mask id="donutmask">
          <path id="logo_mask" fill="white" stroke="white"
                d="M 10,30
           A 20,20 0,1 50,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
        </mask>
      </defs>
    </svg>

此代码成功移动了图像，但不适合响应式设计……我也无法调整图像大小。

<svg>
   <defs>
     <mask id="donutmask">
       <path id="logo_mask" fill="white" stroke="white" transform="translate(500,300)" d="M 10,30 A 20,30 Q 90,90 Q 10,30 z"/>
     </mask>
   </defs>
</svg>

使用 CSS 我能够定位蒙版并再次使用 translate 移动它，但没有别的。

#logo_mask {
  -webkit-transform-origin: center;
  -webkit-transform: translatex(50%) translateY(50%);
}

我也可以使用这个来改变它的比例

#logo_mask{
  -webkit-transform:scale(6);
}

但这会严重影响其坐标，使其几乎无法定位。必须有一种响应方式来做到这一点......

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jqueryslick.jssvgsvgsvg