SVG path won't center as a mask for slick carousel

Question

I found this awesome CodePen by Fabio Ottaviani that takes an SVG Circle and uses it as a mask of the current carousel image. The circle is perfectly centered and will even resize thanks to jQuery. However, when I change the circle to my own SVG image path, the path is always in the top left corner of the window. How do I center the SVG path as an image mask?

Here is the original CodePen by Fabio:

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>

Here is my modified version using an SVG path as a mask:

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,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
        </mask>
      </defs>
    </svg>

This code successfully moves the image, but isn’t ideal for responsive design… nor can I resize the image.

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

using CSS I was able to target the mask and again move it using translate but nothing else.

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

I can also change its scale using this

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

but this heavily affects its coordinates making it nearly impossible to position. There has to be a way of doing this responsively...

@jqueryHtmlCSS CSS doesn’t seem to be working… when I place the path outside of the mask the shape is in the correct position. — Ian Tyler Applebaum, Jul 07 '21 at 00:13
I guess I should mention i’m unopposed to using CSS or JS to resolve this issue. — Ian Tyler Applebaum, Jul 07 '21 at 00:44
Use the CSS tag! You only tagged it jquery svg slick.js Show any CSS you have tried. Ways to center the div and svg using CSS: https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen — react_or_angluar, Jul 07 '21 at 00:58
@jqueryHtmlCSS I provided a CodePen. If you try your proposed solution the image does not move. However, this code successfully moves the image, but isn’t ideal for responsive design… nor can i resize the image. ``` ``` — Ian Tyler Applebaum, Jul 07 '21 at 02:15
This is good information that should be in your question above. https://stackoverflow.com/posts/68277659/edit — react_or_angluar, Jul 07 '21 at 03:50
@jqueryHtmlCSS I have updated the question with more things I have tried. Nothing I google provides a solution. its as if I can only move the path using transform... — Ian Tyler Applebaum, Jul 08 '21 at 20:07

SVG path won't center as a mask for slick carousel

0 Answers0