css - 组元素的转换转换属性在 Firefox 中不起作用
问题描述
我正在尝试转换transform
组 svg 元素的属性。(我可以在圆圈本身上应用过渡,它会起作用,但在一个真实的项目中,我有一个带有路径的组,所以我必须对组元素应用变换)。
它在 Chrome 中运行良好,但在 Firefox 或 Safari 中不起作用。
我已经阅读了我能找到的所有内容,并将其视为解决方案:
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
然而,它对我不起作用。
完整的代码示例也在这里。
<script>
import { scaleTime, scaleLinear, extent, max, timeFormat,scaleBand} from 'd3';
import { fade, fly } from 'svelte/transition';
let points = []
const height = 500;
const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
const yTicks = [0, 5, 10, 15, 20];
const padding = { top: 20, right: 15, bottom: 20, left: 25 };
$: years = points.map(d => d.year)
let selectedY = 'birthrate';
$: xScale = scaleBand()
.domain(years)
.range([padding.left, 500 - padding.right])
.padding(0.2);
$: yScale = scaleLinear()
.domain([0, 20])
.range([500 - padding.bottom, padding.top]);
$: innerWidth = 500 - (padding.left + padding.right);
$: barWidth = innerWidth / xTicks.length;
$: points = points.map(d => ({ ...d, birthrateNew: 15 }))
function updateData() {
points = [
{ id: 1, year: 1990, birthrate: 16.7 },
{ id: 2, year: 1995, birthrate: 14.6 },
{ id: 3, year: 2000, birthrate: 14.4 },
{ id: 4, year: 2005, birthrate: 14 },
{ id: 5, year: 2010, birthrate: 13 },
{ id: 6, year: 2015, birthrate: 12.4 }
];
}
function updateData2() {
selectedY = 'birthrateNew'
}
$: calcData = points.map(d => {
return {
x: xScale(d.year),
y: yScale(d[selectedY]),
};
});
</script>
<svg width="500" height="500">
{#each calcData as d}
<g in:fade="{{delay: d.x*2}}" transform="translate({d.x}, {d.y})">
<circle
cx={8}
cy=23
r= {3}
stroke='#000'
fill= '#fff'
stroke-width='2'
></circle>
</g>
{/each}
</svg>
<button on:click={updateData}>
click me
</button>
<button on:click={updateData2}>
click me
</button>
<style>
g {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
</style>
谢谢!
解决方案
在我看来,Firefox 不允许转换transform
属性。一种解决方法是将翻译也添加到 css(您可以使用自定义 css 属性将坐标传递给样式)
<g in:fade="{{delay: d.x*2}}" style="--x: {d.x}px; --y: {d.y}px;">
和
g {
transform: translate(var(--x), var(--y));
transition: transform 1s linear;
}
请注意,您需要为坐标传递一个单位,但从代码中我认为px
您的用例应该没问题。
推荐阅读
- types - Julia 矩阵乘法类型行为
- javascript - 如何在反应表中使标题可点击
- c# - 为过期令牌添加身份验证错误处理
- mysql - 使用条件缩小搜索范围
- json - type '(dynamic) => RecentNews' 不是类型 '(String, dynamic) => MapEntry 的子类型
'的'转变' - typescript - 剧作家 page.frame 中的通配符(url 选项)
- mysql - 我的 SQL Like 运算符没有给出正确的结果
- scala - Apache Spark中没有水印的滑动窗口?
- java - 如何在 Spring Rest 中映射时间戳?
- scala - 在 Spark 独立集群中使用 Confluent Avro 格式?