Question

在以下代码中，我们为什么要使用webkit和ms关键字？

#svgelem {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
        transform: translateX(-20%);
}

Answer 1

编辑：使用了ms-和webkit-个关键字，因此每个不同的CSS处理器版本（microsoft（ms）和webkit）都知道如何处理该行。这是因为每个CSS处理器在不同时间添加了像变换这样的实验性功能。

像这样的CSS块的典型用法是将元素移动到横轴上它的父对象的中心。

我们的想法是将元素移动到左边缘位于父元素的中间：

#svgelemn {
    position: relative;
    left: 50%;
}

既然元素位于中间的右侧（请记住它是位于中间的左边缘），您需要将元素向左移动50％的宽度（不是它的父级宽度））。因为我们将元素向左移动，我们还需要将百分比反转为负值（-50％）。所以现在添加转换部分：

#svgelemn {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%); /* Webkit specific transform */
    -ms-transform: translateX(-50%); /* Microsoft specific transform */
    transform: translateX(-50%); /* Generic transform (all evergreen browsers) */
}

你所拥有的代码只做了20％的最终调整，所以这不是中间的。

您可以看到示例here。你可以看到顶部元素在中间的位置，而原始代码使它略微偏离中心。

关于HTML 5主题名称SVG

1 个答案: