个人中心
gpt4 book ai didi

css - CSS3 关键帧中的缩放在 SVG 路径上无法正常工作

转载 作者：太空宇宙 更新时间：2023-11-03 22:30:47 25 4
gpt4 key购买 nike

我想在 SVG 路径上应用 scale，所以我有以下代码:

#earth-js{
  border: 1px solid red;
  display: block;
}
.city-circle {
  animation: pulseSelected 2s infinite linear;
  cursor: pointer;
  transform-origin: center center;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50px;
}

@keyframes pulseSelected {
  0% {
    transform: scale(0.5);
    opacity: .9;
  }
  100% {
    transform: scale(2); 
    opacity: 0;

  }
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <div class='city-circle'></div>
    <svg id="earth-js" width="860" height="360"><defs></defs><g class="dot dotsSvg">
<path  class='city-circle' data-index="1" style="fill: rgb(28, 204, 255); stroke: rgb(28, 204, 255); animation-delay: 517.689ms; display: inline;" d="M458.17169314168996,265.21609141306396L458.3294031229126,264.50990914490575L458.56639851394414,263.82542434894174L458.88008274368593,263.1701363838343L459.2670190220743,262.5512247216568L459.7229679942717,261.9754702880956L460.2429341879251,261.4491811692094L460.82122074460705,260.97812349871776L461.45149183578826,260.5674582830334L462.12684207950105,260.22168485619693L462.8398721971492,259.94459158423035L463.58277008155255,259.73921435900684L464.3473963880282,259.60780333638405L465.12537371075416,259.55179828302516L465.90817836738034,259.5718128020147L466.68723378627635,259.6676276100942L467.454004473245,259.8381929401759L468.2000895281826,260.08164004281025L468.9173146870992,260.3953016605964L469.5978218810645,260.7757412512116L470.2341553308561,261.21879063888946L470.81934323403686,261.7195956818242L471.34697414948107,262.2726694551652L471.8112672424652,262.8719523669139L472.207135620703,263.5108785480809L472.5302420674017,264.18244778972155L472.7770465607168,264.8793022386895L472.94484505897253,265.5938070118157L473.0317991267079,266.31813384528607L473.03695607696034,267.04434686273794L472.96025940910386,267.7644895223822L472.8025494278813,268.4706717905404L472.56555403684973,269.1551565865043L472.25186980710794,269.8104445516119L471.8649335287195,270.42935621378945L471.4089845565222,271.0051106473505L470.88901836286874,271.53139976623675L470.31073180618677,272.0024574367286L469.6804607150056,272.41312265241277L469.0051104712928,272.7588960792493L468.2920803536447,273.03598935121585L467.5491824692413,273.24136657643936L466.7845561627656,273.37277759906215L466.00657884003965,273.428782652421L465.2237741834135,273.40876813343164L464.44471876451746,273.31295332535205L463.6779480775489,273.1423879952704L462.9318630226112,272.898940892636L462.21463786369463,272.5852792748499L461.5341306697294,272.20483968423446L460.89779721993773,271.7617902965568L460.31260931675695,271.2609852536221L459.7849784013128,270.7079114802808L459.3206853083287,270.10862856853225L458.92481693009086,269.46970238736526L458.6017104833922,268.7981331457247L458.35490599007704,268.1012786967567L458.1871074918213,267.38677392363047L458.100153424086,266.6624470901602L458.09499647383353,265.93623407270826Z" >
></g></svg>
   
</body>
</html>

在 Chrome 61 上，代码可以正常工作，但在 Chrome 64 上，SVG 的缩放效果很奇怪。看起来圆圈在移动而不是在缩放...

已更新最新的 Firefox (58.0.1) 也不能正常工作。

谁能解释一下？

最佳答案

Chrome 引入了对 transform-box 的支持在 v64 中。 spec将 view-box 定义为默认值，这意味着对于 SVG 命名空间中的元素，使用最近的 SVG 视口(viewport)元素。

在您的情况下，transform-origin: center center 会将变换原点设置为 SVG 元素的中间，而不是路径。显式设置 transform-b​​ox: fill-box。

#earth-js{
  border: 1px solid red;
  display: block;
}
.city-circle {
  animation: pulseSelected 2s infinite linear;
  cursor: pointer;
  transform-origin: center center;
  transform-box: fill-box;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50px;
}

@keyframes pulseSelected {
  0% {
    transform: scale(0.5);
    opacity: .9;
  }
  100% {
    transform: scale(2); 
    opacity: 0;

  }
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <div class='city-circle'></div>
    <svg id="earth-js" width="860" height="360"><defs></defs><g class="dot dotsSvg">
<path  class='city-circle' data-index="1" style="fill: rgb(28, 204, 255); stroke: rgb(28, 204, 255); animation-delay: 517.689ms; display: inline;" d="M458.17169314168996,265.21609141306396L458.3294031229126,264.50990914490575L458.56639851394414,263.82542434894174L458.88008274368593,263.1701363838343L459.2670190220743,262.5512247216568L459.7229679942717,261.9754702880956L460.2429341879251,261.4491811692094L460.82122074460705,260.97812349871776L461.45149183578826,260.5674582830334L462.12684207950105,260.22168485619693L462.8398721971492,259.94459158423035L463.58277008155255,259.73921435900684L464.3473963880282,259.60780333638405L465.12537371075416,259.55179828302516L465.90817836738034,259.5718128020147L466.68723378627635,259.6676276100942L467.454004473245,259.8381929401759L468.2000895281826,260.08164004281025L468.9173146870992,260.3953016605964L469.5978218810645,260.7757412512116L470.2341553308561,261.21879063888946L470.81934323403686,261.7195956818242L471.34697414948107,262.2726694551652L471.8112672424652,262.8719523669139L472.207135620703,263.5108785480809L472.5302420674017,264.18244778972155L472.7770465607168,264.8793022386895L472.94484505897253,265.5938070118157L473.0317991267079,266.31813384528607L473.03695607696034,267.04434686273794L472.96025940910386,267.7644895223822L472.8025494278813,268.4706717905404L472.56555403684973,269.1551565865043L472.25186980710794,269.8104445516119L471.8649335287195,270.42935621378945L471.4089845565222,271.0051106473505L470.88901836286874,271.53139976623675L470.31073180618677,272.0024574367286L469.6804607150056,272.41312265241277L469.0051104712928,272.7588960792493L468.2920803536447,273.03598935121585L467.5491824692413,273.24136657643936L466.7845561627656,273.37277759906215L466.00657884003965,273.428782652421L465.2237741834135,273.40876813343164L464.44471876451746,273.31295332535205L463.6779480775489,273.1423879952704L462.9318630226112,272.898940892636L462.21463786369463,272.5852792748499L461.5341306697294,272.20483968423446L460.89779721993773,271.7617902965568L460.31260931675695,271.2609852536221L459.7849784013128,270.7079114802808L459.3206853083287,270.10862856853225L458.92481693009086,269.46970238736526L458.6017104833922,268.7981331457247L458.35490599007704,268.1012786967567L458.1871074918213,267.38677392363047L458.100153424086,266.6624470901602L458.09499647383353,265.93623407270826Z" >
></g></svg>
   
</body>
</html>

关于css - CSS3 关键帧中的缩放在 SVG 路径上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48641591/

25 4 0
文章推荐： c# - 如何在 CustomPropertyDrawer 中设置 SerializedProperty.propertyType
文章推荐： css - ionic 中的 ToastController 自定义位置
文章推荐： opencv - 如何在 OpenCV 中训练阶段树分类器而不是级联来进行人脸检测？
文章推荐： javascript - 将事件类添加到菜单
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com