From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../svg/attribute/alignment-baseline/index.html | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/alignment-baseline/index.html (limited to 'files/zh-cn/web/svg/attribute/alignment-baseline') diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html new file mode 100644 index 0000000000..33eb2afa6c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html @@ -0,0 +1,92 @@ +--- +title: alignment-baseline +slug: Web/SVG/Attribute/alignment-baseline +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/alignment-baseline +--- +

« SVG属性参考主页

+ +

alignment-baseline属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子,允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是baseline,与该alignment-baseline属性的计算值同名。

+ +

作为一个外观属性,它还可以直接作为CSS样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。

+ +

用法

+ + + + + + + + + + + + + + + + + + + + +
类别外观属性
auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit
可变性Yes
规范文档SVG 1.1 (2nd Edition)
+ +

示例

+ +
<?xml version="1.0"?>
+<svg width="300" height="120" viewBox="0 0 300 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+    <!-- Materialisation of anchors -->
+    <path d="M60,10 L60,110
+             M30,10 L300,10
+             M30,65 L300,65
+             M30,110 L300,110
+             " stroke="grey" />
+
+    <!-- Anchors in action -->
+    <text alignment-baseline="hanging"
+          x="60" y="10">A hanging</text>
+
+    <text alignment-baseline="middle"
+          x="60" y="65">A middle</text>
+
+    <text alignment-baseline="baseline"
+          x="60" y="110">A baseline</text>
+
+    <!-- Materialisation of anchors -->
+    <circle cx="60" cy="10" r="3" fill="red" />
+    <circle cx="60" cy="65" r="3" fill="red" />
+    <circle cx="60" cy="110" r="3" fill="red" />
+
+<style><![CDATA[
+text{
+    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+}
+]]></style>
+</svg>
+
+ +

元素

+ +

下列元素使用alignment-baseline属性:

+ + + +

如果对象要在别的元素中对齐(比如在{{ SVGElement("text") }}元素中),请阅读{{ SVGAttr("dominant-baseline") }}。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf