From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/svg/attribute/styling/index.html | 32 ++++ .../zh-cn/web/svg/attribute/text-anchor/index.html | 95 ++++++++++ .../index.html" | 95 ---------- .../attribute/\346\240\267\345\274\217/index.html" | 32 ---- .../zh-cn/web/svg/tutorial/svg_and_css/index.html | 191 +++++++++++++++++++++ 5 files changed, 318 insertions(+), 127 deletions(-) create mode 100644 files/zh-cn/web/svg/attribute/styling/index.html create mode 100644 files/zh-cn/web/svg/attribute/text-anchor/index.html delete mode 100644 "files/zh-cn/web/svg/attribute/\346\226\207\346\234\254\351\224\232\347\202\271/index.html" delete mode 100644 "files/zh-cn/web/svg/attribute/\346\240\267\345\274\217/index.html" create mode 100644 files/zh-cn/web/svg/tutorial/svg_and_css/index.html (limited to 'files/zh-cn/web/svg') diff --git a/files/zh-cn/web/svg/attribute/styling/index.html b/files/zh-cn/web/svg/attribute/styling/index.html new file mode 100644 index 0000000000..6d9669c5c5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/styling/index.html @@ -0,0 +1,32 @@ +--- +title: SVG样式属性 +slug: Web/SVG/Attribute/样式 +translation_of: Web/SVG/Attribute/Styling +--- +

SVG样式属性是所有可以在任何SVG元素上指定以应用CSS样式效果的属性。

+ +
+ +
+ +

属性

+ +
+
{{SVGAttr('class')}}
+
给一个元素分配一个类名称或者设置类名。它跟 HTML中的{{htmlattrxref('class')}}属性具有同样的功能。
+ Value: 任何可用的ID字符; Animatable: Yes
+
{{SVGAttr('style')}}
+
它指定元素的样式信息。它跟HTML中 {{htmlattrxref('style')}}属性具有相同的功能。
+ Value:任何可用的ID字符; Animatable: No +

 

+
+
+ +

浏览器支持

+ + + +

{{Compat("svg.attributes.style")}}

diff --git a/files/zh-cn/web/svg/attribute/text-anchor/index.html b/files/zh-cn/web/svg/attribute/text-anchor/index.html new file mode 100644 index 0000000000..7a71281230 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/text-anchor/index.html @@ -0,0 +1,95 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/文本锚点 +tags: + - 可缩放矢量图形 + - 可缩放矢量图形 属性 +translation_of: Web/SVG/Attribute/text-anchor +--- +

« SVG Attribute reference home

+ +

文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐) 。

+ +

文本锚点属性被运用到每个 {{ SVGElement("text") }} 元素的独立文本块上。 每个文本块有一个初始的当前文本位置，一个来源于 {{ SVGElement("text") }} 元素的{{ SVGAttr("x") }}和{{ SVGAttr("y") }}属性在当前上下文的用户坐标系中所对应的点，任何 一个{{ SVGElement("tspan") }}、{{SVGElement("tref") }}、{{ SVGElement("altGlyph") }} 元素的 {{ SVGAttr("x") }} 或者 {{ SVGAttr("y") }} 属性值都明确指向了文本块里第一个被呈现的字符，或者是决定了{{ SVGElement("textPath") }}元素的当前文本位置的初始值。

+ +

作为一个描述性的属性，它也可以直接用作css样式的性质（style属性的值）。

+ +

使用方法

+ + + + + + + + + + + + + + + + + + + + +
类别呈现属性
值start | middle | end | inherit
可动画化是
标准文件SVG 1.1 (2nd Edition)
+ +
+
start
+
所呈现的字符对齐方式为：文本字符串的开始位置即当前文本的初始位置.对于拉丁文在其通常文本排列方向，这就相当于左对齐. 对于脚本像希伯来语和阿拉伯语这类自右向左排列的文字来说，这相当于右对齐. 对于亚洲某些垂直走向的文本来说，这相当于向上对齐。
+
middle
+
所呈现的字符对齐方式为：文本字符串的中间位置即当前文本的初始位置. (对于按路径排列的文本，会从概念上首先将其文本排列在一条直线上，确定该串中点位置后，然再将该文本映射到路径上，并且将之前确定的中点放置在当前文本的位置上 )
+
end
+
所呈现的字符对齐方式为：文本字符串的末尾即当前文本的初始位置.对于拉丁语通常的文字走向来说，这就相当于右对齐. 对于像希伯来语和阿拉伯语这类将文字自右向左排列的脚本来说，这相当于左对齐.
+
+ +

示例

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+    <!-- Materialisation of anchors -->
+    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
+
+
+    <!-- Anchors in action -->
+    <text text-anchor="start"
+          x="60" y="40">A</text>
+
+    <text text-anchor="middle"
+          x="60" y="75">A</text>
+
+    <text text-anchor="end"
+          x="60" y="110">A</text>
+
+    <!-- Materialisation of anchors -->
+    <circle cx="60" cy="40" r="3" fill="red" />
+    <circle cx="60" cy="75" 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>
+ +

Live sample

+ +

{{ EmbedLiveSample('Example','120','120') }}

+ +

元素

+ +

 

+ +

以下元素可以运用文本锚点属性：

+ +

 

+ + diff --git "a/files/zh-cn/web/svg/attribute/\346\226\207\346\234\254\351\224\232\347\202\271/index.html" "b/files/zh-cn/web/svg/attribute/\346\226\207\346\234\254\351\224\232\347\202\271/index.html" deleted file mode 100644 index 7a71281230..0000000000 --- "a/files/zh-cn/web/svg/attribute/\346\226\207\346\234\254\351\224\232\347\202\271/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: text-anchor -slug: Web/SVG/Attribute/文本锚点 -tags: - - 可缩放矢量图形 - - 可缩放矢量图形 属性 -translation_of: Web/SVG/Attribute/text-anchor ---- -

« SVG Attribute reference home

- -

文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐) 。

- -

文本锚点属性被运用到每个 {{ SVGElement("text") }} 元素的独立文本块上。 每个文本块有一个初始的当前文本位置，一个来源于 {{ SVGElement("text") }} 元素的{{ SVGAttr("x") }}和{{ SVGAttr("y") }}属性在当前上下文的用户坐标系中所对应的点，任何 一个{{ SVGElement("tspan") }}、{{SVGElement("tref") }}、{{ SVGElement("altGlyph") }} 元素的 {{ SVGAttr("x") }} 或者 {{ SVGAttr("y") }} 属性值都明确指向了文本块里第一个被呈现的字符，或者是决定了{{ SVGElement("textPath") }}元素的当前文本位置的初始值。

- -

作为一个描述性的属性，它也可以直接用作css样式的性质（style属性的值）。

- -

使用方法

- - - - - - - - - - - - - - - - - - - - -
类别呈现属性
值start | middle | end | inherit
可动画化是
标准文件SVG 1.1 (2nd Edition)
- -
-
start
-
所呈现的字符对齐方式为：文本字符串的开始位置即当前文本的初始位置.对于拉丁文在其通常文本排列方向，这就相当于左对齐. 对于脚本像希伯来语和阿拉伯语这类自右向左排列的文字来说，这相当于右对齐. 对于亚洲某些垂直走向的文本来说，这相当于向上对齐。
-
middle
-
所呈现的字符对齐方式为：文本字符串的中间位置即当前文本的初始位置. (对于按路径排列的文本，会从概念上首先将其文本排列在一条直线上，确定该串中点位置后，然再将该文本映射到路径上，并且将之前确定的中点放置在当前文本的位置上 )
-
end
-
所呈现的字符对齐方式为：文本字符串的末尾即当前文本的初始位置.对于拉丁语通常的文字走向来说，这就相当于右对齐. 对于像希伯来语和阿拉伯语这类将文字自右向左排列的脚本来说，这相当于左对齐.
-
- -

示例

- -
<?xml version="1.0"?>
-<svg width="120" height="120" viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-
-    <!-- Materialisation of anchors -->
-    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
-
-
-    <!-- Anchors in action -->
-    <text text-anchor="start"
-          x="60" y="40">A</text>
-
-    <text text-anchor="middle"
-          x="60" y="75">A</text>
-
-    <text text-anchor="end"
-          x="60" y="110">A</text>
-
-    <!-- Materialisation of anchors -->
-    <circle cx="60" cy="40" r="3" fill="red" />
-    <circle cx="60" cy="75" 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>
- -

Live sample

- -

{{ EmbedLiveSample('Example','120','120') }}

- -

元素

- -

 

- -

以下元素可以运用文本锚点属性：

- -

 

- - diff --git "a/files/zh-cn/web/svg/attribute/\346\240\267\345\274\217/index.html" "b/files/zh-cn/web/svg/attribute/\346\240\267\345\274\217/index.html" deleted file mode 100644 index 6d9669c5c5..0000000000 --- "a/files/zh-cn/web/svg/attribute/\346\240\267\345\274\217/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: SVG样式属性 -slug: Web/SVG/Attribute/样式 -translation_of: Web/SVG/Attribute/Styling ---- -

SVG样式属性是所有可以在任何SVG元素上指定以应用CSS样式效果的属性。

- -
- -
- -

属性

- -
-
{{SVGAttr('class')}}
-
给一个元素分配一个类名称或者设置类名。它跟 HTML中的{{htmlattrxref('class')}}属性具有同样的功能。
- Value: 任何可用的ID字符; Animatable: Yes
-
{{SVGAttr('style')}}
-
它指定元素的样式信息。它跟HTML中 {{htmlattrxref('style')}}属性具有相同的功能。
- Value:任何可用的ID字符; Animatable: No -

 

-
-
- -

浏览器支持

- - - -

{{Compat("svg.attributes.style")}}

diff --git a/files/zh-cn/web/svg/tutorial/svg_and_css/index.html b/files/zh-cn/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..f2e753baca --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,191 @@ +--- +title: SVG and CSS +slug: Web/Guide/CSS/Getting_started/SVG_and_CSS +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +
+ {{CSSTutorialTOC}}
+

本节将演示如何将CSS应用到 SVG 中。

+

你将创建一个简单的演示代码并在支持SVG的浏览器中运行。

+

这是 CSS 教程 第二部分的第二节
+ 前一节: JavaScript
+ 下一节: XML data

+

信息: SVG

+

SVG (Scalable Vector Graphics)是一个基于XML的图形描述语言。

+

它可以用于描述静态图、动画，以及用户界面。

+

和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。

+

在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 background 属性指定一个SVG的URL。

+ + + + + + + +
+ 更多细节
+

在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 SVG tables on caniuse.com 了解支持情况。 参见 SVG element reference 了解兼容情况。

+

通过安装 Adobe 提供的插件，你可以让某些浏览器支持SVG。

+

欲在Mozilla了解更多关于SVG的信息，参考 这里SVG。

+
+

实例: 一个SVG演示

+

建立一个SVG文件doc8.svg。复制下面所有内容：

+
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+

创建一个CSS文件, style8.css。 复制下面所有内容：

+
/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+

在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。

+

由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:

+ + + + + + +
SVG demonstration
+

解释:

+ + + + + + + + +
+ 挑战
修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。
+

接下来?

+

如果你有任何疑问或评论请移步到讨论区。

+

在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: XML data

-- cgit v1.2.3-54-g00ecf