From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/svg/element/stop/index.html | 126 ++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 files/zh-cn/web/svg/element/stop/index.html (limited to 'files/zh-cn/web/svg/element/stop') diff --git a/files/zh-cn/web/svg/element/stop/index.html b/files/zh-cn/web/svg/element/stop/index.html new file mode 100644 index 0000000000..28097fd94a --- /dev/null +++ b/files/zh-cn/web/svg/element/stop/index.html @@ -0,0 +1,126 @@ +--- +title: stop +slug: Web/SVG/Element/stop +tags: + - SVG + - SVG渐变 + - 元素 + - 参考 + - 需要示例 +translation_of: Web/SVG/Element/stop +--- +
{{SVGRef}}
+ +

一个渐变上的颜色坡度,是用stop元素定义的。stop元素可以是{{SVGElement("linearGradient")}}元素或者{{SVGElement("radialGradient")}}元素的子元素。

+ +

用法

+ +

{{svginfo}}

+ +

示例

+ +
<svg width="100%" height="100%" viewBox="0 0 80 40"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="MyGradient">
+      <stop offset="5%" stop-color="#F60" />
+      <stop offset="95%" stop-color="#FF6" />
+    </linearGradient>
+  </defs>
+
+  <!-- Outline the drawing area in black -->
+  <rect fill="none" stroke="black"
+        x="0.5" y="0.5" width="79" height="39"/>
+
+  <!-- The rectangle is filled using a linear gradient -->
+  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
+        x="10" y="10" width="60" height="20"/>
+</svg>
+
+ +

示例输出:

+ +

{{EmbedLiveSample("Example",160,95)}}

+ +

属性

+ +

全局属性

+ + + +

专有属性

+ + + +

DOM 接口

+ +

该元素实现了SVGStopElement接口。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)IEOperaSafari
Basic support{{CompatIE('1.0')}}{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('9.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

该表格基于这些资源

+ +

参见

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