关于 HTML 5 主题名称 SVG

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 块的典型用法是将元素移动到其 parent object 水平轴的中心。

想法是将元素移动到左边缘在 parent:

的中间

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

现在元素刚好在中间的右边（记住它是中间的左边缘），你需要将元素向左移动它自己宽度的 50%（不是它的宽度） parents 宽度）。因为我们将元素向左移动，所以我们还需要反转百分比，使其为负数 (-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

Regarding HTML 5 topic name SVG

css

internet-explorer

svg

webkit