Question

我有这段代码，我希望SVG对象在悬停时扩展。我查找了一个解决方案，让SVG对象从形状的中心扩展，但它没有响应。我的另一个尝试是使用a:hover并使用CSS转换简单地转换它，但正如您所料，它会缩放，但也会远离画布。

a {
  display: block;
  width: 1500px;
  height: 850px;
  transition: all .2s;
  font-size: 0;
  position: absolute;
  background: black;
}

a:hover {
  background: gray;
  /*Attempt to scale using CSS, but there was a failure
  transform: scale(1.5,1.5);
  -ms-transform: scale(1.5,1.5);
  -webkit-transform: scale(1.5,1.5);*/
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}

<head>
  <svg>
    <defs>
      <clipPath id="c1">
        <path
        d="
        M 10, 0
        L 200, 80
        L 300, 60
        Z
        "/>
      </clipPath>
    </defs>
    <use xlink:href="#c1" transform="translate(-50,-50) scale (1.5)"/>
  </svg>
</head>
<body>
  <div id="navPanel">
    <a href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
  </div>
</body>

Answer 1

问题在于<a>标记的宽度和高度

这是工作小提琴：https://jsfiddle.net/0we13sx9/2/

<强> CSS

a {
  display: block;
  width: 300px;
  height: 100px;
  transition: all .2s;
  font-size: 0;
  position: relative;
  background: black;
}

a:hover {
  background: gray;
  /* Attempt to scale using CSS, but there was a failure */
  transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  -webkit-transform: scale(1.2,1.2);
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}

Answer 2

您使用剪辑路径让自己变得困难。您的问题是剪辑路径具有绝对坐标。当你缩放<a>元素时，你不能告诉任何事情，因为剪辑路径保持相同的大小。

您需要缩放剪辑路径。你只能使用Javascript。见下文。

＆＃13;

var item = document.getElementById("item1");

item.addEventListener("mouseover", function(evt) {
  document.querySelector("#c1 path").setAttribute("transform",
    "translate(155,40) scale(1.5) translate(-155,-40)");
});

item.addEventListener("mouseout", function(evt) {
  document.querySelector("#c1 path").removeAttribute("transform");
});

＆＃13;

a {
  display: block;
  width: 1500px;
  height: 850px;
  transition: all .2s;
  font-size: 0;
  position: absolute;
  background: black;
}

a:hover {
  background: gray;
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}

＆＃13;

<head>
  <svg>
    <defs>
      <clipPath id="c1">
        <path
        d="
        M 10, 0
        L 200, 80
        L 300, 60
        Z
        " />
      </clipPath>
    </defs>
  </svg>
</head>
<body>
  <div id="navPanel">
    <a id="item1" href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
  </div>
</body>

＆＃13;

放大的剪辑路径本身被<a>元素的边缘剪切。您可以通过将剪辑路径移离边缘来解决此问题。即增加剪辑路径中的坐标值。

SVG从中心点缩放

2 个答案: