From a75a85238b1f8b154a412090fb8305d986aae090 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 1 Oct 2022 10:29:00 +0200 Subject: [PATCH 1/2] move *.html to *.md --- .../applying_svg_effects_to_html_content/{index.html => index.md} | 0 files/ru/web/svg/attribute/additive/{index.html => index.md} | 0 files/ru/web/svg/attribute/attributename/{index.html => index.md} | 0 files/ru/web/svg/attribute/attributetype/{index.html => index.md} | 0 files/ru/web/svg/attribute/class/{index.html => index.md} | 0 files/ru/web/svg/attribute/core/{index.html => index.md} | 0 files/ru/web/svg/attribute/cx/{index.html => index.md} | 0 files/ru/web/svg/attribute/cy/{index.html => index.md} | 0 files/ru/web/svg/attribute/d/{index.html => index.md} | 0 files/ru/web/svg/attribute/dur/{index.html => index.md} | 0 files/ru/web/svg/attribute/end/{index.html => index.md} | 0 files/ru/web/svg/attribute/fill-opacity/{index.html => index.md} | 0 files/ru/web/svg/attribute/fill-rule/{index.html => index.md} | 0 files/ru/web/svg/attribute/fill/{index.html => index.md} | 0 files/ru/web/svg/attribute/font-weight/{index.html => index.md} | 0 files/ru/web/svg/attribute/id/{index.html => index.md} | 0 files/ru/web/svg/attribute/{index.html => index.md} | 0 files/ru/web/svg/attribute/keytimes/{index.html => index.md} | 0 files/ru/web/svg/attribute/lang/{index.html => index.md} | 0 files/ru/web/svg/attribute/lengthadjust/{index.html => index.md} | 0 .../ru/web/svg/attribute/letter-spacing/{index.html => index.md} | 0 .../ru/web/svg/attribute/lighting-color/{index.html => index.md} | 0 files/ru/web/svg/attribute/overflow/{index.html => index.md} | 0 .../svg/attribute/patterncontentunits/{index.html => index.md} | 0 files/ru/web/svg/attribute/r/{index.html => index.md} | 0 files/ru/web/svg/attribute/repeatcount/{index.html => index.md} | 0 files/ru/web/svg/attribute/rx/{index.html => index.md} | 0 files/ru/web/svg/attribute/ry/{index.html => index.md} | 0 .../ru/web/svg/attribute/shape-rendering/{index.html => index.md} | 0 files/ru/web/svg/attribute/stop-color/{index.html => index.md} | 0 .../web/svg/attribute/stroke-dashoffset/{index.html => index.md} | 0 .../ru/web/svg/attribute/stroke-linecap/{index.html => index.md} | 0 files/ru/web/svg/attribute/stroke-width/{index.html => index.md} | 0 files/ru/web/svg/attribute/stroke/{index.html => index.md} | 0 files/ru/web/svg/attribute/text-anchor/{index.html => index.md} | 0 .../ru/web/svg/attribute/text-rendering/{index.html => index.md} | 0 files/ru/web/svg/attribute/transform/{index.html => index.md} | 0 files/ru/web/svg/attribute/values/{index.html => index.md} | 0 files/ru/web/svg/attribute/viewbox/{index.html => index.md} | 0 files/ru/web/svg/attribute/width/{index.html => index.md} | 0 files/ru/web/svg/attribute/x/{index.html => index.md} | 0 .../ru/web/svg/attribute/xml_colon_space/{index.html => index.md} | 0 files/ru/web/svg/attribute/y/{index.html => index.md} | 0 files/ru/web/svg/element/a/{index.html => index.md} | 0 files/ru/web/svg/element/animate/{index.html => index.md} | 0 files/ru/web/svg/element/animatemotion/{index.html => index.md} | 0 files/ru/web/svg/element/circle/{index.html => index.md} | 0 files/ru/web/svg/element/defs/{index.html => index.md} | 0 files/ru/web/svg/element/ellipse/{index.html => index.md} | 0 files/ru/web/svg/element/feblend/{index.html => index.md} | 0 files/ru/web/svg/element/foreignobject/{index.html => index.md} | 0 files/ru/web/svg/element/g/{index.html => index.md} | 0 files/ru/web/svg/element/image/{index.html => index.md} | 0 files/ru/web/svg/element/{index.html => index.md} | 0 files/ru/web/svg/element/line/{index.html => index.md} | 0 files/ru/web/svg/element/lineargradient/{index.html => index.md} | 0 files/ru/web/svg/element/path/{index.html => index.md} | 0 files/ru/web/svg/element/pattern/{index.html => index.md} | 0 files/ru/web/svg/element/polygon/{index.html => index.md} | 0 files/ru/web/svg/element/radialgradient/{index.html => index.md} | 0 files/ru/web/svg/element/rect/{index.html => index.md} | 0 files/ru/web/svg/element/svg/{index.html => index.md} | 0 files/ru/web/svg/element/text/{index.html => index.md} | 0 files/ru/web/svg/element/use/{index.html => index.md} | 0 files/ru/web/svg/{index.html => index.md} | 0 files/ru/web/svg/svg_as_an_image/{index.html => index.md} | 0 files/ru/web/svg/tutorial/basic_shapes/{index.html => index.md} | 0 .../svg/tutorial/basic_transformations/{index.html => index.md} | 0 .../svg/tutorial/clipping_and_masking/{index.html => index.md} | 0 .../web/svg/tutorial/fills_and_strokes/{index.html => index.md} | 0 files/ru/web/svg/tutorial/filter_effects/{index.html => index.md} | 0 .../ru/web/svg/tutorial/getting_started/{index.html => index.md} | 0 files/ru/web/svg/tutorial/gradients/{index.html => index.md} | 0 files/ru/web/svg/tutorial/{index.html => index.md} | 0 files/ru/web/svg/tutorial/introduction/{index.html => index.md} | 0 .../svg/tutorial/other_content_in_svg/{index.html => index.md} | 0 files/ru/web/svg/tutorial/paths/{index.html => index.md} | 0 files/ru/web/svg/tutorial/patterns/{index.html => index.md} | 0 files/ru/web/svg/tutorial/positions/{index.html => index.md} | 0 files/ru/web/svg/tutorial/svg_and_css/{index.html => index.md} | 0 files/ru/web/svg/tutorial/svg_fonts/{index.html => index.md} | 0 files/ru/web/svg/tutorial/svg_image_tag/{index.html => index.md} | 0 .../tutorial/svg_in_html_introduction/{index.html => index.md} | 0 files/ru/web/svg/tutorial/texts/{index.html => index.md} | 0 files/ru/web/svg/tutorial/tools_for_svg/{index.html => index.md} | 0 85 files changed, 0 insertions(+), 0 deletions(-) rename files/ru/web/svg/applying_svg_effects_to_html_content/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/additive/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/attributename/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/attributetype/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/class/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/core/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/cx/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/cy/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/d/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/dur/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/end/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/fill-opacity/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/fill-rule/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/fill/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/font-weight/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/id/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/keytimes/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/lang/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/lengthadjust/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/letter-spacing/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/lighting-color/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/overflow/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/patterncontentunits/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/r/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/repeatcount/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/rx/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/ry/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/shape-rendering/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/stop-color/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/stroke-dashoffset/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/stroke-linecap/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/stroke-width/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/stroke/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/text-anchor/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/text-rendering/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/transform/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/values/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/viewbox/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/width/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/x/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/xml_colon_space/{index.html => index.md} (100%) rename files/ru/web/svg/attribute/y/{index.html => index.md} (100%) rename files/ru/web/svg/element/a/{index.html => index.md} (100%) rename files/ru/web/svg/element/animate/{index.html => index.md} (100%) rename files/ru/web/svg/element/animatemotion/{index.html => index.md} (100%) rename files/ru/web/svg/element/circle/{index.html => index.md} (100%) rename files/ru/web/svg/element/defs/{index.html => index.md} (100%) rename files/ru/web/svg/element/ellipse/{index.html => index.md} (100%) rename files/ru/web/svg/element/feblend/{index.html => index.md} (100%) rename files/ru/web/svg/element/foreignobject/{index.html => index.md} (100%) rename files/ru/web/svg/element/g/{index.html => index.md} (100%) rename files/ru/web/svg/element/image/{index.html => index.md} (100%) rename files/ru/web/svg/element/{index.html => index.md} (100%) rename files/ru/web/svg/element/line/{index.html => index.md} (100%) rename files/ru/web/svg/element/lineargradient/{index.html => index.md} (100%) rename files/ru/web/svg/element/path/{index.html => index.md} (100%) rename files/ru/web/svg/element/pattern/{index.html => index.md} (100%) rename files/ru/web/svg/element/polygon/{index.html => index.md} (100%) rename files/ru/web/svg/element/radialgradient/{index.html => index.md} (100%) rename files/ru/web/svg/element/rect/{index.html => index.md} (100%) rename files/ru/web/svg/element/svg/{index.html => index.md} (100%) rename files/ru/web/svg/element/text/{index.html => index.md} (100%) rename files/ru/web/svg/element/use/{index.html => index.md} (100%) rename files/ru/web/svg/{index.html => index.md} (100%) rename files/ru/web/svg/svg_as_an_image/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/basic_shapes/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/basic_transformations/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/clipping_and_masking/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/fills_and_strokes/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/filter_effects/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/getting_started/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/gradients/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/introduction/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/other_content_in_svg/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/paths/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/patterns/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/positions/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/svg_and_css/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/svg_fonts/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/svg_image_tag/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/svg_in_html_introduction/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/texts/{index.html => index.md} (100%) rename files/ru/web/svg/tutorial/tools_for_svg/{index.html => index.md} (100%) diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.md similarity index 100% rename from files/ru/web/svg/applying_svg_effects_to_html_content/index.html rename to files/ru/web/svg/applying_svg_effects_to_html_content/index.md diff --git a/files/ru/web/svg/attribute/additive/index.html b/files/ru/web/svg/attribute/additive/index.md similarity index 100% rename from files/ru/web/svg/attribute/additive/index.html rename to files/ru/web/svg/attribute/additive/index.md diff --git a/files/ru/web/svg/attribute/attributename/index.html b/files/ru/web/svg/attribute/attributename/index.md similarity index 100% rename from files/ru/web/svg/attribute/attributename/index.html rename to files/ru/web/svg/attribute/attributename/index.md diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.md similarity index 100% rename from files/ru/web/svg/attribute/attributetype/index.html rename to files/ru/web/svg/attribute/attributetype/index.md diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.md similarity index 100% rename from files/ru/web/svg/attribute/class/index.html rename to files/ru/web/svg/attribute/class/index.md diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.md similarity index 100% rename from files/ru/web/svg/attribute/core/index.html rename to files/ru/web/svg/attribute/core/index.md diff --git a/files/ru/web/svg/attribute/cx/index.html b/files/ru/web/svg/attribute/cx/index.md similarity index 100% rename from files/ru/web/svg/attribute/cx/index.html rename to files/ru/web/svg/attribute/cx/index.md diff --git a/files/ru/web/svg/attribute/cy/index.html b/files/ru/web/svg/attribute/cy/index.md similarity index 100% rename from files/ru/web/svg/attribute/cy/index.html rename to files/ru/web/svg/attribute/cy/index.md diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.md similarity index 100% rename from files/ru/web/svg/attribute/d/index.html rename to files/ru/web/svg/attribute/d/index.md diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.md similarity index 100% rename from files/ru/web/svg/attribute/dur/index.html rename to files/ru/web/svg/attribute/dur/index.md diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.md similarity index 100% rename from files/ru/web/svg/attribute/end/index.html rename to files/ru/web/svg/attribute/end/index.md diff --git a/files/ru/web/svg/attribute/fill-opacity/index.html b/files/ru/web/svg/attribute/fill-opacity/index.md similarity index 100% rename from files/ru/web/svg/attribute/fill-opacity/index.html rename to files/ru/web/svg/attribute/fill-opacity/index.md diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.md similarity index 100% rename from files/ru/web/svg/attribute/fill-rule/index.html rename to files/ru/web/svg/attribute/fill-rule/index.md diff --git a/files/ru/web/svg/attribute/fill/index.html b/files/ru/web/svg/attribute/fill/index.md similarity index 100% rename from files/ru/web/svg/attribute/fill/index.html rename to files/ru/web/svg/attribute/fill/index.md diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.md similarity index 100% rename from files/ru/web/svg/attribute/font-weight/index.html rename to files/ru/web/svg/attribute/font-weight/index.md diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.md similarity index 100% rename from files/ru/web/svg/attribute/id/index.html rename to files/ru/web/svg/attribute/id/index.md diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.md similarity index 100% rename from files/ru/web/svg/attribute/index.html rename to files/ru/web/svg/attribute/index.md diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.md similarity index 100% rename from files/ru/web/svg/attribute/keytimes/index.html rename to files/ru/web/svg/attribute/keytimes/index.md diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.md similarity index 100% rename from files/ru/web/svg/attribute/lang/index.html rename to files/ru/web/svg/attribute/lang/index.md diff --git a/files/ru/web/svg/attribute/lengthadjust/index.html b/files/ru/web/svg/attribute/lengthadjust/index.md similarity index 100% rename from files/ru/web/svg/attribute/lengthadjust/index.html rename to files/ru/web/svg/attribute/lengthadjust/index.md diff --git a/files/ru/web/svg/attribute/letter-spacing/index.html b/files/ru/web/svg/attribute/letter-spacing/index.md similarity index 100% rename from files/ru/web/svg/attribute/letter-spacing/index.html rename to files/ru/web/svg/attribute/letter-spacing/index.md diff --git a/files/ru/web/svg/attribute/lighting-color/index.html b/files/ru/web/svg/attribute/lighting-color/index.md similarity index 100% rename from files/ru/web/svg/attribute/lighting-color/index.html rename to files/ru/web/svg/attribute/lighting-color/index.md diff --git a/files/ru/web/svg/attribute/overflow/index.html b/files/ru/web/svg/attribute/overflow/index.md similarity index 100% rename from files/ru/web/svg/attribute/overflow/index.html rename to files/ru/web/svg/attribute/overflow/index.md diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.md similarity index 100% rename from files/ru/web/svg/attribute/patterncontentunits/index.html rename to files/ru/web/svg/attribute/patterncontentunits/index.md diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.md similarity index 100% rename from files/ru/web/svg/attribute/r/index.html rename to files/ru/web/svg/attribute/r/index.md diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.md similarity index 100% rename from files/ru/web/svg/attribute/repeatcount/index.html rename to files/ru/web/svg/attribute/repeatcount/index.md diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.md similarity index 100% rename from files/ru/web/svg/attribute/rx/index.html rename to files/ru/web/svg/attribute/rx/index.md diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.md similarity index 100% rename from files/ru/web/svg/attribute/ry/index.html rename to files/ru/web/svg/attribute/ry/index.md diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.md similarity index 100% rename from files/ru/web/svg/attribute/shape-rendering/index.html rename to files/ru/web/svg/attribute/shape-rendering/index.md diff --git a/files/ru/web/svg/attribute/stop-color/index.html b/files/ru/web/svg/attribute/stop-color/index.md similarity index 100% rename from files/ru/web/svg/attribute/stop-color/index.html rename to files/ru/web/svg/attribute/stop-color/index.md diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.html b/files/ru/web/svg/attribute/stroke-dashoffset/index.md similarity index 100% rename from files/ru/web/svg/attribute/stroke-dashoffset/index.html rename to files/ru/web/svg/attribute/stroke-dashoffset/index.md diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.html b/files/ru/web/svg/attribute/stroke-linecap/index.md similarity index 100% rename from files/ru/web/svg/attribute/stroke-linecap/index.html rename to files/ru/web/svg/attribute/stroke-linecap/index.md diff --git a/files/ru/web/svg/attribute/stroke-width/index.html b/files/ru/web/svg/attribute/stroke-width/index.md similarity index 100% rename from files/ru/web/svg/attribute/stroke-width/index.html rename to files/ru/web/svg/attribute/stroke-width/index.md diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.md similarity index 100% rename from files/ru/web/svg/attribute/stroke/index.html rename to files/ru/web/svg/attribute/stroke/index.md diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.md similarity index 100% rename from files/ru/web/svg/attribute/text-anchor/index.html rename to files/ru/web/svg/attribute/text-anchor/index.md diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.md similarity index 100% rename from files/ru/web/svg/attribute/text-rendering/index.html rename to files/ru/web/svg/attribute/text-rendering/index.md diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.md similarity index 100% rename from files/ru/web/svg/attribute/transform/index.html rename to files/ru/web/svg/attribute/transform/index.md diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.md similarity index 100% rename from files/ru/web/svg/attribute/values/index.html rename to files/ru/web/svg/attribute/values/index.md diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.md similarity index 100% rename from files/ru/web/svg/attribute/viewbox/index.html rename to files/ru/web/svg/attribute/viewbox/index.md diff --git a/files/ru/web/svg/attribute/width/index.html b/files/ru/web/svg/attribute/width/index.md similarity index 100% rename from files/ru/web/svg/attribute/width/index.html rename to files/ru/web/svg/attribute/width/index.md diff --git a/files/ru/web/svg/attribute/x/index.html b/files/ru/web/svg/attribute/x/index.md similarity index 100% rename from files/ru/web/svg/attribute/x/index.html rename to files/ru/web/svg/attribute/x/index.md diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.html b/files/ru/web/svg/attribute/xml_colon_space/index.md similarity index 100% rename from files/ru/web/svg/attribute/xml_colon_space/index.html rename to files/ru/web/svg/attribute/xml_colon_space/index.md diff --git a/files/ru/web/svg/attribute/y/index.html b/files/ru/web/svg/attribute/y/index.md similarity index 100% rename from files/ru/web/svg/attribute/y/index.html rename to files/ru/web/svg/attribute/y/index.md diff --git a/files/ru/web/svg/element/a/index.html b/files/ru/web/svg/element/a/index.md similarity index 100% rename from files/ru/web/svg/element/a/index.html rename to files/ru/web/svg/element/a/index.md diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.md similarity index 100% rename from files/ru/web/svg/element/animate/index.html rename to files/ru/web/svg/element/animate/index.md diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.md similarity index 100% rename from files/ru/web/svg/element/animatemotion/index.html rename to files/ru/web/svg/element/animatemotion/index.md diff --git a/files/ru/web/svg/element/circle/index.html b/files/ru/web/svg/element/circle/index.md similarity index 100% rename from files/ru/web/svg/element/circle/index.html rename to files/ru/web/svg/element/circle/index.md diff --git a/files/ru/web/svg/element/defs/index.html b/files/ru/web/svg/element/defs/index.md similarity index 100% rename from files/ru/web/svg/element/defs/index.html rename to files/ru/web/svg/element/defs/index.md diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.md similarity index 100% rename from files/ru/web/svg/element/ellipse/index.html rename to files/ru/web/svg/element/ellipse/index.md diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.md similarity index 100% rename from files/ru/web/svg/element/feblend/index.html rename to files/ru/web/svg/element/feblend/index.md diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.md similarity index 100% rename from files/ru/web/svg/element/foreignobject/index.html rename to files/ru/web/svg/element/foreignobject/index.md diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.md similarity index 100% rename from files/ru/web/svg/element/g/index.html rename to files/ru/web/svg/element/g/index.md diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.md similarity index 100% rename from files/ru/web/svg/element/image/index.html rename to files/ru/web/svg/element/image/index.md diff --git a/files/ru/web/svg/element/index.html b/files/ru/web/svg/element/index.md similarity index 100% rename from files/ru/web/svg/element/index.html rename to files/ru/web/svg/element/index.md diff --git a/files/ru/web/svg/element/line/index.html b/files/ru/web/svg/element/line/index.md similarity index 100% rename from files/ru/web/svg/element/line/index.html rename to files/ru/web/svg/element/line/index.md diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.md similarity index 100% rename from files/ru/web/svg/element/lineargradient/index.html rename to files/ru/web/svg/element/lineargradient/index.md diff --git a/files/ru/web/svg/element/path/index.html b/files/ru/web/svg/element/path/index.md similarity index 100% rename from files/ru/web/svg/element/path/index.html rename to files/ru/web/svg/element/path/index.md diff --git a/files/ru/web/svg/element/pattern/index.html b/files/ru/web/svg/element/pattern/index.md similarity index 100% rename from files/ru/web/svg/element/pattern/index.html rename to files/ru/web/svg/element/pattern/index.md diff --git a/files/ru/web/svg/element/polygon/index.html b/files/ru/web/svg/element/polygon/index.md similarity index 100% rename from files/ru/web/svg/element/polygon/index.html rename to files/ru/web/svg/element/polygon/index.md diff --git a/files/ru/web/svg/element/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.md similarity index 100% rename from files/ru/web/svg/element/radialgradient/index.html rename to files/ru/web/svg/element/radialgradient/index.md diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.md similarity index 100% rename from files/ru/web/svg/element/rect/index.html rename to files/ru/web/svg/element/rect/index.md diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.md similarity index 100% rename from files/ru/web/svg/element/svg/index.html rename to files/ru/web/svg/element/svg/index.md diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.md similarity index 100% rename from files/ru/web/svg/element/text/index.html rename to files/ru/web/svg/element/text/index.md diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.md similarity index 100% rename from files/ru/web/svg/element/use/index.html rename to files/ru/web/svg/element/use/index.md diff --git a/files/ru/web/svg/index.html b/files/ru/web/svg/index.md similarity index 100% rename from files/ru/web/svg/index.html rename to files/ru/web/svg/index.md diff --git a/files/ru/web/svg/svg_as_an_image/index.html b/files/ru/web/svg/svg_as_an_image/index.md similarity index 100% rename from files/ru/web/svg/svg_as_an_image/index.html rename to files/ru/web/svg/svg_as_an_image/index.md diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.md similarity index 100% rename from files/ru/web/svg/tutorial/basic_shapes/index.html rename to files/ru/web/svg/tutorial/basic_shapes/index.md diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.md similarity index 100% rename from files/ru/web/svg/tutorial/basic_transformations/index.html rename to files/ru/web/svg/tutorial/basic_transformations/index.md diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.md similarity index 100% rename from files/ru/web/svg/tutorial/clipping_and_masking/index.html rename to files/ru/web/svg/tutorial/clipping_and_masking/index.md diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.md similarity index 100% rename from files/ru/web/svg/tutorial/fills_and_strokes/index.html rename to files/ru/web/svg/tutorial/fills_and_strokes/index.md diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.md similarity index 100% rename from files/ru/web/svg/tutorial/filter_effects/index.html rename to files/ru/web/svg/tutorial/filter_effects/index.md diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.md similarity index 100% rename from files/ru/web/svg/tutorial/getting_started/index.html rename to files/ru/web/svg/tutorial/getting_started/index.md diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.md similarity index 100% rename from files/ru/web/svg/tutorial/gradients/index.html rename to files/ru/web/svg/tutorial/gradients/index.md diff --git a/files/ru/web/svg/tutorial/index.html b/files/ru/web/svg/tutorial/index.md similarity index 100% rename from files/ru/web/svg/tutorial/index.html rename to files/ru/web/svg/tutorial/index.md diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.md similarity index 100% rename from files/ru/web/svg/tutorial/introduction/index.html rename to files/ru/web/svg/tutorial/introduction/index.md diff --git a/files/ru/web/svg/tutorial/other_content_in_svg/index.html b/files/ru/web/svg/tutorial/other_content_in_svg/index.md similarity index 100% rename from files/ru/web/svg/tutorial/other_content_in_svg/index.html rename to files/ru/web/svg/tutorial/other_content_in_svg/index.md diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.md similarity index 100% rename from files/ru/web/svg/tutorial/paths/index.html rename to files/ru/web/svg/tutorial/paths/index.md diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.md similarity index 100% rename from files/ru/web/svg/tutorial/patterns/index.html rename to files/ru/web/svg/tutorial/patterns/index.md diff --git a/files/ru/web/svg/tutorial/positions/index.html b/files/ru/web/svg/tutorial/positions/index.md similarity index 100% rename from files/ru/web/svg/tutorial/positions/index.html rename to files/ru/web/svg/tutorial/positions/index.md diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.md similarity index 100% rename from files/ru/web/svg/tutorial/svg_and_css/index.html rename to files/ru/web/svg/tutorial/svg_and_css/index.md diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.md similarity index 100% rename from files/ru/web/svg/tutorial/svg_fonts/index.html rename to files/ru/web/svg/tutorial/svg_fonts/index.md diff --git a/files/ru/web/svg/tutorial/svg_image_tag/index.html b/files/ru/web/svg/tutorial/svg_image_tag/index.md similarity index 100% rename from files/ru/web/svg/tutorial/svg_image_tag/index.html rename to files/ru/web/svg/tutorial/svg_image_tag/index.md diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.md similarity index 100% rename from files/ru/web/svg/tutorial/svg_in_html_introduction/index.html rename to files/ru/web/svg/tutorial/svg_in_html_introduction/index.md diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.md similarity index 100% rename from files/ru/web/svg/tutorial/texts/index.html rename to files/ru/web/svg/tutorial/texts/index.md diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.md similarity index 100% rename from files/ru/web/svg/tutorial/tools_for_svg/index.html rename to files/ru/web/svg/tutorial/tools_for_svg/index.md From a53df04f3ce52389fb75f3cd12ab8c29c5af8c60 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 1 Oct 2022 10:29:06 +0200 Subject: [PATCH 2/2] convert content to md --- .../index.md | 296 +++--- files/ru/web/svg/attribute/additive/index.md | 77 +- .../web/svg/attribute/attributename/index.md | 95 +- .../web/svg/attribute/attributetype/index.md | 84 +- files/ru/web/svg/attribute/class/index.md | 219 ++-- files/ru/web/svg/attribute/core/index.md | 107 +- files/ru/web/svg/attribute/cx/index.md | 70 +- files/ru/web/svg/attribute/cy/index.md | 69 +- files/ru/web/svg/attribute/d/index.md | 750 ++++++-------- files/ru/web/svg/attribute/dur/index.md | 103 +- files/ru/web/svg/attribute/end/index.md | 63 +- .../web/svg/attribute/fill-opacity/index.md | 76 +- files/ru/web/svg/attribute/fill-rule/index.md | 209 ++-- files/ru/web/svg/attribute/fill/index.md | 146 ++- .../ru/web/svg/attribute/font-weight/index.md | 90 +- files/ru/web/svg/attribute/id/index.md | 88 +- files/ru/web/svg/attribute/index.md | 786 +++++++-------- files/ru/web/svg/attribute/keytimes/index.md | 89 +- files/ru/web/svg/attribute/lang/index.md | 75 +- .../web/svg/attribute/lengthadjust/index.md | 38 +- .../web/svg/attribute/letter-spacing/index.md | 57 +- .../web/svg/attribute/lighting-color/index.md | 48 +- files/ru/web/svg/attribute/overflow/index.md | 75 +- .../attribute/patterncontentunits/index.md | 75 +- files/ru/web/svg/attribute/r/index.md | 189 ++-- .../ru/web/svg/attribute/repeatcount/index.md | 47 +- files/ru/web/svg/attribute/rx/index.md | 167 ++-- files/ru/web/svg/attribute/ry/index.md | 165 ++-- .../svg/attribute/shape-rendering/index.md | 91 +- .../ru/web/svg/attribute/stop-color/index.md | 70 +- .../svg/attribute/stroke-dashoffset/index.md | 210 ++-- .../web/svg/attribute/stroke-linecap/index.md | 212 ++-- .../web/svg/attribute/stroke-width/index.md | 89 +- files/ru/web/svg/attribute/stroke/index.md | 75 +- .../ru/web/svg/attribute/text-anchor/index.md | 155 ++- .../web/svg/attribute/text-rendering/index.md | 142 ++- files/ru/web/svg/attribute/transform/index.md | 188 ++-- files/ru/web/svg/attribute/values/index.md | 96 +- files/ru/web/svg/attribute/viewbox/index.md | 241 ++--- files/ru/web/svg/attribute/width/index.md | 931 ++++++------------ files/ru/web/svg/attribute/x/index.md | 110 +-- .../svg/attribute/xml_colon_space/index.md | 77 +- files/ru/web/svg/attribute/y/index.md | 110 +-- files/ru/web/svg/element/a/index.md | 188 ++-- files/ru/web/svg/element/animate/index.md | 64 +- .../ru/web/svg/element/animatemotion/index.md | 152 ++- files/ru/web/svg/element/circle/index.md | 90 +- files/ru/web/svg/element/defs/index.md | 83 +- files/ru/web/svg/element/ellipse/index.md | 123 +-- files/ru/web/svg/element/feblend/index.md | 128 ++- .../ru/web/svg/element/foreignobject/index.md | 171 ++-- files/ru/web/svg/element/g/index.md | 85 +- files/ru/web/svg/element/image/index.md | 79 +- files/ru/web/svg/element/index.md | 326 +++--- files/ru/web/svg/element/line/index.md | 126 ++- .../web/svg/element/lineargradient/index.md | 160 ++- files/ru/web/svg/element/path/index.md | 102 +- files/ru/web/svg/element/pattern/index.md | 209 ++-- files/ru/web/svg/element/polygon/index.md | 92 +- .../web/svg/element/radialgradient/index.md | 123 +-- files/ru/web/svg/element/rect/index.md | 134 +-- files/ru/web/svg/element/svg/index.md | 170 ++-- files/ru/web/svg/element/text/index.md | 221 ++--- files/ru/web/svg/element/use/index.md | 189 ++-- files/ru/web/svg/index.md | 158 ++- files/ru/web/svg/svg_as_an_image/index.md | 77 +- .../ru/web/svg/tutorial/basic_shapes/index.md | 194 ++-- .../tutorial/basic_transformations/index.md | 121 +-- .../tutorial/clipping_and_masking/index.md | 115 +-- .../svg/tutorial/fills_and_strokes/index.md | 183 ++-- .../web/svg/tutorial/filter_effects/index.md | 12 +- .../web/svg/tutorial/getting_started/index.md | 122 +-- files/ru/web/svg/tutorial/gradients/index.md | 260 ++--- files/ru/web/svg/tutorial/index.md | 64 +- .../ru/web/svg/tutorial/introduction/index.md | 38 +- .../tutorial/other_content_in_svg/index.md | 40 +- files/ru/web/svg/tutorial/paths/index.md | 296 +++--- files/ru/web/svg/tutorial/patterns/index.md | 104 +- files/ru/web/svg/tutorial/positions/index.md | 47 +- .../ru/web/svg/tutorial/svg_and_css/index.md | 197 ++-- files/ru/web/svg/tutorial/svg_fonts/index.md | 124 +-- .../web/svg/tutorial/svg_image_tag/index.md | 40 +- .../svg_in_html_introduction/index.md | 154 ++- files/ru/web/svg/tutorial/texts/index.md | 95 +- .../web/svg/tutorial/tools_for_svg/index.md | 68 +- 85 files changed, 5517 insertions(+), 7157 deletions(-) diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.md b/files/ru/web/svg/applying_svg_effects_to_html_content/index.md index d9ba5ae65313b3..4dac54b1afc40c 100644 --- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.md @@ -3,230 +3,250 @@ title: Применение эффектов SVG к содержимому HTML slug: Web/SVG/Applying_SVG_effects_to_HTML_content translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content --- -

Современные браузеры поддерживают SVG в стилях CSS для применения графических эффектов к HTML-контенту.

+Современные браузеры поддерживают [SVG](/ru/docs/SVG) в стилях [CSS](/ru/docs/Web/CSS "Cascading Style Sheets") для применения графических эффектов к HTML-контенту. -

Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: mask, clip-path, и filter.

+Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: [`mask`](/ru/docs/Web/CSS/mask), [`clip-path`](/ru/docs/Web/CSS/clip-path), и [`filter`](/ru/docs/Web/CSS/filter). -
Примечание: Ссылки на SVG во внешних файлах должны быть в том же самом источнике same origin , что и ссылочный документ.
+> **Примечание:** Ссылки на SVG во внешних файлах должны быть в том же самом источнике [same origin](/ru/docs/Web/Security/Same-origin_policy) , что и ссылочный документ. -

Использование встроенного SVG

+## Использование встроенного SVG -

Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG.

+Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG. -
<style>p { mask: url(#my-mask); }</style>
-
+```html + +``` -

В приведённом выше примере все параграфы маскируются с помощью SVG <mask> с ID my-mask.

+В приведённом выше примере все параграфы маскируются с помощью [SVG](/ru/docs/Web/SVG/Element/mask) [``](/ru/docs/Web/SVG/Element/mask) с [ID](/ru/docs/Web/HTML/Global_attributes/id) `my-mask`. -

Пример: маскировка

+### Пример: маскировка -

Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:

+Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML: -
<svg height="0">
-  <mask id="mask-1">
-    <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
-    </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
-  </mask>
-</svg>
-
+```html + + + + + + + + + + +``` -
.target {
+```css
+.target {
   mask: url(#mask-1);
 }
 p {
   width: 300px;
   border: 1px solid #000;
   display: inline-block;
-}
+} +``` -

Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- #mask-1, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.

+Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- `#mask-1`, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента. -

Применение SVG-эффекта к (X) HTML выполняется путём назначения target классу, определённому выше элементу, например:

+Применение SVG-эффекта к (X) HTML выполняется путём назначения `target` классу, определённому выше элементу, например: -
<p class="target" style="background:lime;">
+```html
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<p> +

+

Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -

+

+``` -

Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.

+Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему. -

{{EmbedLiveSample('Пример_маскировка', 650, 200)}}

+{{EmbedLiveSample('Пример_маскировка', 650, 200)}} -

Пример: обрезание

+### Пример: обрезание -

Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.

+Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются. -
<p class="target" style="background:lime;">
+```html
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<p> +

+

Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> +

-<button onclick="toggleRadius()">Toggle radius</button> + -<svg height="0"> - <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> - <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> - <rect x="0.5" y="0.2" width="0.5" height="0.8"/> - </clipPath> -</svg> -
+ + + + + + +``` -
.target {
+```css
+.target {
   clip-path: url(#clipping-path-1);
 }
 p {
   width: 300px;
   border: 1px solid #000;
   display: inline-block;
-}
+} +``` -

Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID #clipping-path-1, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с target классом.

+Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID `#clipping-path-1`, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с `target` классом. -

Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:

+Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа: -
function toggleRadius() {
+```js
+function toggleRadius() {
   var circle = document.getElementById("circle");
   circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
 }
-
+``` -

{{EmbedLiveSample('Пример_обрезание', 650, 200)}}

+{{EmbedLiveSample('Пример_обрезание', 650, 200)}} -

Пример: Фильтрация

+### Пример: Фильтрация -

Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при hover мыши.

+Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при [hover](/ru/docs/Web/CSS/:hover) мыши. -
<p class="target" style="background: lime;">
+```html
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<pre class="target">lorem</pre> -<p> +

+
lorem
+

Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -

+

+``` -

Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:

+Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать: -
<svg height="0">
-  <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-</svg>
+```html + + + + + +``` -

Вы также можете применить цветовую матрицу:

+Вы также можете применить цветовую матрицу: -
<svg height="0">
-  <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
+```html
+
+  
+    
-
-

И ещё несколько фильтров:

- -
<svg height="0">
-  <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
-  </filter>
-  <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
-    </feSpecularLighting>
-  </filter>
-  <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
+                           0      0      0      1 0"/>
+  
+
+```
+
+И ещё несколько фильтров:
+
+```html
+
+  
+    
+  
+  
+    
+      
+    
+  
+  
+    
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+  
+
+```
 
-

Пять фильтров применяются с использованием следующего CSS:

+Пять фильтров применяются с использованием следующего CSS: -
p.target { filter:url(#f3); }
+```css
+p.target { filter:url(#f3); }
 p.target:hover { filter:url(#f5); }
 b.target { filter:url(#f1); }
 b.target:hover { filter:url(#f4); }
 pre.target { filter:url(#f2); }
 pre.target:hover { filter:url(#f3); }
-
+``` -

{{EmbedLiveSample('Пример_Фильтрация', 650, 200)}}

+{{EmbedLiveSample('Пример_Фильтрация', 650, 200)}} -

Пример: размытый текст

+### Пример: размытый текст -

Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также CSS filter). Вы можете добиться такого же эффекта, используя фильтры SVG.

+Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также [CSS filter](/ru/docs/Web/CSS/filter#blur%28%29_2)). Вы можете добиться такого же эффекта, используя фильтры SVG. -
<p class="blur">Time to clean my glasses</p>
-<svg height="0">
-  <defs>
-    <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
-    </filter>
-  </defs>
-</svg>
-
+```html +

Time to clean my glasses

+ + + + + + + +``` -

Вы можете применить SVG и CSS-фильтр в том же классе:

+Вы можете применить SVG и CSS-фильтр в том же классе: -
.blur { filter: url(#wherearemyglasses); }
+```css +.blur { filter: url(#wherearemyglasses); } +``` -

{{ EmbedLiveSample('Пример_размытый_текст', 300, 100) }}

+{{ EmbedLiveSample('Пример_размытый_текст', 300, 100) }} -

Размытие является сложным вычислением, поэтому используйте его экономно, особенно в элементах, которые прокручиваются или анимируются.

+Размытие является сложным вычислением, поэтому используйте его экономно, особенно в элементах, которые прокручиваются или анимируются. -

Пример: текстовые эффекты

+### Пример: текстовые эффекты -

Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML.

+Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML. -

Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст:

+Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст: -
<svg height="60" width="200">
-  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Пример текста</text>
-</svg>
-
+```html + + Пример текста + +``` -

Использование внешних ссылок

+## Использование внешних ссылок -

SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется.

+SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется. -

For example, if your CSS is in a file namedit can look like this:
- Например, если ваш CSS находится в файле с именем default.css, он может выглядеть следующим образом:

+For example, if your CSS is in a file namedit can look like this: +Например, если ваш CSS находится в файле с именем `default.css`, он может выглядеть следующим образом: -
.target { clip-path: url(resources.svg#c1); }
+```css +.target { clip-path: url(resources.svg#c1); } +``` -

Затем SVG импортируется из файла с именем resources.svg, используя путь клипа с ID c1.

+Затем SVG импортируется из файла с именем `resources.svg`, используя путь клипа с ID `c1`. -

Смотрите также

+## Смотрите также - +- [SVG](/ru/docs/SVG "SVG") +- [Эффекты SVG для HTML-контента](http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html) (запись в блоге) +- ~~[SVG External Document References](/web-tech/2008/10/10/svg-external-document-references)~~ (запись в блоге) ([\[archive.org\] Web Tech Blog »Архив блога» Ссылки на внешние документы SVG](http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/ "Web Tech Blog » Blog Archive » SVG External Document References")) diff --git a/files/ru/web/svg/attribute/additive/index.md b/files/ru/web/svg/attribute/additive/index.md index 0d042f8c308548..0898da4c026c3f 100644 --- a/files/ru/web/svg/attribute/additive/index.md +++ b/files/ru/web/svg/attribute/additive/index.md @@ -6,51 +6,32 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/additive --- -

« Справочник SVG атрибутов

- -

Этот атрибут определяет, является ли анимация аддитивной.

- -

Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
КатегорииАтрибут добавления анимации
Значениеreplace | sum
АнимируемыйНет
Нормативный документSVG 1.1 (2nd Edition)
- -
-
sum
-
Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.
-
replace
-
Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в SMIL Animation: How from, to and by attributes affect additive behavior.
-
- -

Пример

- -

Элементы

- -

Следующие элементы могут использовать атрибут additive

- -
    -
  • {{ SVGElement("animate") }}
  • -
  • {{ SVGElement("animateColor") }}
  • -
  • {{ SVGElement("animateMotion") }}
  • -
  • {{ SVGElement("animateTransform") }}
  • -
+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") + +Этот атрибут определяет, является ли анимация аддитивной. + +Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута. + +## Контекст использования + +| Категории | Атрибут добавления анимации | +| -------------------- | --------------------------------------------------------------------------------- | +| Значение | **replace** \| sum | +| Анимируемый | Нет | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AdditionAttributes) | + +- sum + - : Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом. +- replace + - : Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в [SMIL Animation: How from, to and by attributes affect additive behavior](http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive). + +## Пример + +## Элементы + +Следующие элементы могут использовать атрибут `additive` + +- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateMotion") }} +- {{ SVGElement("animateTransform") }} diff --git a/files/ru/web/svg/attribute/attributename/index.md b/files/ru/web/svg/attribute/attributename/index.md index 2c1fa91d9c0a68..3156e6bb0ec0e7 100644 --- a/files/ru/web/svg/attribute/attributename/index.md +++ b/files/ru/web/svg/attribute/attributename/index.md @@ -7,81 +7,58 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/attributeName --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут attributeName задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.

+Атрибут **`attributeName`** задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации. -

Четыре элемента используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}

+Четыре элемента используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}} -
- +} +``` -
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
-  <rect x="50" y="50" width="100" height="100">
-    <animate attributeType="XML" attributeName="y" from="0" to="50"
-        dur="5s" repeatCount="indefinite"/>
-  </rect>
-</svg>
+```html + + + + + +``` -

{{EmbedLiveSample("topExample", "400", "250")}}

-
+{{EmbedLiveSample("topExample", "400", "250")}} -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - -
Значение<name>
Значение по умолчаниюNone
АнимируемыйНет
- -
-
<name>
-
Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.
-
- -

Спецификации

- - - + - - - + + - - - - - + + - - - + +
SpecificationStatusCommentЗначение<name>
{{SpecName("SVG Animations 2", "#AttributeNameAttribute", "attributeName")}} - {{Spec2("SVG Animations 2")}}No changeЗначение по умолчаниюNone
{{SpecName("SVG1.1", "animate.html#AttributeNameAttribute", "attributeName")}} - {{Spec2("SVG1.1")}}Initial definitionАнимируемыйНет
-

Смотрите также

+- `` + - : Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано. + +## Спецификации + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName("SVG Animations 2", "#AttributeNameAttribute", "attributeName")}} | {{Spec2("SVG Animations 2")}} | No change | +| {{SpecName("SVG1.1", "animate.html#AttributeNameAttribute", "attributeName")}} | {{Spec2("SVG1.1")}} | Initial definition | + +## Смотрите также - +- [SMIL Animation specification](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute) diff --git a/files/ru/web/svg/attribute/attributetype/index.md b/files/ru/web/svg/attribute/attributetype/index.md index aabf8e0d8ccb30..c8be6f0550753b 100644 --- a/files/ru/web/svg/attribute/attributetype/index.md +++ b/files/ru/web/svg/attribute/attributetype/index.md @@ -6,54 +6,36 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/attributeType --- -

« Справочник SVG атрибутов

- -

Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
КатегорияЦелевые атрибуты анимации
ЗначениеCSS | XML | auto
АнимируемыйНет
Нормативный документSVG 1.1 (2nd Edition)
- -

Этот атрибут может принимать одно из следующих значений:

- -
-
CSS
-
Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация.
-
-
XML
-
Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента.
-
auto
-
Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента.
-
- -

Пример

- -

Элементы

- -

Следующие элементы могут быть использованы с атрибутом attributeType

- -
    -
  • {{ SVGElement("animate") }}
  • -
  • {{ SVGElement("animateColor") }}
  • -
  • {{ SVGElement("animateTransform") }}
  • -
  • {{ SVGElement("set") }}
  • -
+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") + +Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения. + +## Контекст использования + +| Категория | Целевые атрибуты анимации | +| -------------------- | ------------------------------------------------------------------------------------- | +| Значение | CSS \| XML \| **auto** | +| Анимируемый | Нет | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute) | + +Этот атрибут может принимать одно из следующих значений: + +- CSS + - : Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация. +- XML + + - : Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента. + +- auto + - : Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента. + +## Пример + +## Элементы + +Следующие элементы могут быть использованы с атрибутом `attributeType` + +- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateTransform") }} +- {{ SVGElement("set") }} diff --git a/files/ru/web/svg/attribute/class/index.md b/files/ru/web/svg/attribute/class/index.md index 1134219036b126..cf970523f8182f 100644 --- a/files/ru/web/svg/attribute/class/index.md +++ b/files/ru/web/svg/attribute/class/index.md @@ -3,54 +3,38 @@ title: class slug: Web/SVG/Attribute/class translation_of: Web/SVG/Attribute/class --- -

« Домашняя страница справочника по SVG атрибутам

- -

Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".

- -

Класс элемента имеет 2 ключевые роли:

- -
    -
  • Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.
  • -
  • Для общих целей Броузера.
  • -
- -

Класс может быть использован для стилизации SVG содержимого используя CSS.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
КатегорияNone
Значение<list-of-class-names>
Возможна анимацияYes
Нормативный документSVG 1.1 (2nd Edition): The class attribute
- -

{{ page("/en/SVG/Content_type","List-of-Ts") }}

- -

Example

- -
<html>
-    <body>
-        <svg width="120" height="220"
+« [Домашняя страница справочника по SVG атрибутам](/en/SVG/Attribute "en/SVG/Attribute")
+
+Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".
+
+Класс элемента имеет 2 ключевые роли:
+
+- Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.
+- Для общих целей Броузера.
+
+Класс может быть использован для стилизации SVG содержимого используя CSS.
+
+## Контекст использования
+
+| Категория            | None                                                                                               |
+| -------------------- | -------------------------------------------------------------------------------------------------- |
+| Значение             | [\](/en/SVG/Content_type#List-of-Ts "en/SVG/Content type#List-of-Ts")         |
+| Возможна анимация    | Yes                                                                                                |
+| Нормативный документ | [SVG 1.1 (2nd Edition): The class attribute](http://www.w3.org/TR/SVG/styling.html#ClassAttribute) |
+
+{{ page("/en/SVG/Content_type","List-of-Ts") }}
+
+## Example
+
+```html
+
+    
+        
 
-            <style type="text/css" >
-                <![CDATA[
+            
+
+            
+            
+        
+    
+
+```
+
+## Элементы
+
+В следующих элементах допустимо использовать атрибут `class`
+
+:{{ SVGElement("a") }}
+
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("circle") }}
+- {{ SVGElement("clipPath") }}
+- {{ SVGElement("defs") }}
+- {{ SVGElement("desc") }}
+- {{ SVGElement("ellipse") }}
+- {{ SVGElement("feBlend") }}
+- {{ SVGElement("feColorMatrix") }}
+- {{ SVGElement("feComponentTransfer") }}
+- {{ SVGElement("feComposite") }}
+- {{ SVGElement("feConvolveMatrix") }}
+- {{ SVGElement("feDiffuseLighting") }}
+- {{ SVGElement("feDisplacementMap") }}
+- {{ SVGElement("feFlood") }}
+- {{ SVGElement("feGaussianBlur") }}
+- {{ SVGElement("feImage") }}
+- {{ SVGElement("feMerge") }}
+- {{ SVGElement("feMorphology") }}
+- {{ SVGElement("feOffset") }}
+- {{ SVGElement("feSpecularLighting") }}
+- {{ SVGElement("feTile") }}
+- {{ SVGElement("feTurbulence") }}
+- {{ SVGElement("filter") }}
+- {{ SVGElement("font") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("g") }}
+- {{ SVGElement("glyph") }}
+- {{ SVGElement("glyphRef") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("line") }}
+- {{ SVGElement("linearGradient") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("mask") }}
+- {{ SVGElement("missing-glyph") }}
+- {{ SVGElement("path") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("polygon") }}
+- {{ SVGElement("polyline") }}
+- {{ SVGElement("radialGradient") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("stop") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("switch") }}
+- {{ SVGElement("symbol") }}
+- {{ SVGElement("text") }}
+- {{ SVGElement("textPath") }}
+- {{ SVGElement("title") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("tspan") }}
+- {{ SVGElement("use") }}
+
+## Совместимость с броузерами
+
+{{Compat}}
diff --git a/files/ru/web/svg/attribute/core/index.md b/files/ru/web/svg/attribute/core/index.md
index 33703846b9272a..c1e670c05de8a8 100644
--- a/files/ru/web/svg/attribute/core/index.md
+++ b/files/ru/web/svg/attribute/core/index.md
@@ -5,63 +5,50 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/Core
 ---
-

Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.

- - - -

Атрибуты

- -
-
{{SVGAttr('id')}}
-
Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).
- Значение: Любое строковое значение ID; Анимируемый: Нет
-
{{SVGAttr('lang')}}
-
-

Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в документе IETF "Tags for Identifying Languages (BCP47)".

- -
-

SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

-
- -

Значение: Любой валидный язык ID; Анимируемый: Нет

-
-
{{SVGAttr('tabindex')}}
-
Атрибут SVG tabindex позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.
- Тип значения: <integer>; Анимируемый: Нет
-
{{SVGAttr('xml:base')}}
-
Указывает базовый IRI, отличный от базового IRI текущего документа.
- Тип: <IRI>; Анимируемый: Нет
-
{{SVGAttr('xml:lang')}}
-
-

Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута lang в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (null) значение атрибута (xml:lang="") для указания неизвестного языка. Вместо этого, используйте xml:lang="und".

- -
-

SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

-
- -

Значение: Любой валидный язык ID; Анимируемый: Нет

-
-
{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}
-
-

SVG поддерживает стандартный XML-атрибут xml:space для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.

- -
-

Примечание: Вместо атрибута xml:space следует использовать CSS-свойство {{cssxref('white-space')}}.

-
- -

Значение: default | preserve; Анимируемый: Нет

-
-
- -

Поддержка браузерами

- -

{{Compat}}

+Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах. + +- `id` +- [`lang`](#attr-lang) +- [`tabindex`](#attr-tabindex) +- [`xml:base`](#attr-xml:base) +- [`xml:lang`](#attr-xml:lang) +- [`xml:space`](#attr-xml:space) + +## Атрибуты + +- {{SVGAttr('id')}} + - : Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS). + _Значение_: Любое строковое значение ID; _Анимируемый_: **Нет** +- {{SVGAttr('lang')}} + + - : Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в [документе IETF "Tags for Identifying Languages (BCP47)"](https://www.ietf.org/rfc/bcp/bcp47.txt). + + > **Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`. + + _Значение_: Любой валидный язык ID; _Анимируемый_: **Нет** + +- {{SVGAttr('tabindex')}} + - : Атрибут SVG `tabindex` позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса. + _Тип значения_: [\](/docs/Web/SVG/Content_type#Integer); _Анимируемый_: **Нет** +- {{SVGAttr('xml:base')}} + - : Указывает базовый IRI, отличный от базового IRI текущего документа. + _Тип_: [\](/docs/Web/SVG/Content_type#IRI); _Анимируемый_: **Нет** +- {{SVGAttr('xml:lang')}} + + - : Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута [lang](/ru/docs/Web/HTML/Global_attributes/lang) в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (`null`) значение атрибута (`xml:lang=""`) для указания неизвестного языка. Вместо этого, используйте `xml:lang="und"`. + + > **Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`. + + _Значение_: Любой валидный язык ID; _Анимируемый_: **Нет** + +- {{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}} + + - : SVG поддерживает стандартный XML-атрибут `xml:space` для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента. + + > **Примечание:** Вместо атрибута `xml:space` следует использовать CSS-свойство {{cssxref('white-space')}}. + + _Значение_: **`default`** | `preserve`; _Анимируемый_: **Нет** + +## Поддержка браузерами + +{{Compat}} diff --git a/files/ru/web/svg/attribute/cx/index.md b/files/ru/web/svg/attribute/cx/index.md index 81ef957d5e8e9f..2e9ca902326899 100644 --- a/files/ru/web/svg/attribute/cx/index.md +++ b/files/ru/web/svg/attribute/cx/index.md @@ -6,65 +6,47 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/cx --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".

+Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x. Если атрибут не определён, то эффект такой, как если бы было указано значение "0". -

Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента 100% соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение 50%.

+Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента **100%** соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение **50%**. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорииНет
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): The circle element
- SVG 1.1 (2nd Edition): The ellipse element
- SVG 1.1 (2nd Edition): The radialGradient element
+| Категории | Нет | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | [\](/en/SVG/Content_type#Coordinate "https://developer.mozilla.org/en/SVG/Content_type#Coordinate") | +| Анимируемый | Да | +| Нормативные документы (en) | [SVG 1.1 (2nd Edition): The circle element](http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute) [SVG 1.1 (2nd Edition): The ellipse element](http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute) [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) | -

{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}

+{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }} -

Пример

+## Пример -
  <svg width="120" height="220"
+```xml
+  
 
-    <style type="text/css" >
+    
+     
+
+```
 
-

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут cx

+Следующие элементы могут использовать атрибут `cx` -
    -
  • {{ SVGElement("circle") }}
  • -
  • {{ SVGElement("ellipse") }}
  • -
  • {{ SVGElement("radialGradient") }}
  • -
+- {{ SVGElement("circle") }} +- {{ SVGElement("ellipse") }} +- {{ SVGElement("radialGradient") }} diff --git a/files/ru/web/svg/attribute/cy/index.md b/files/ru/web/svg/attribute/cy/index.md index 31ec417e5bef3f..fd8192e69edf81 100644 --- a/files/ru/web/svg/attribute/cy/index.md +++ b/files/ru/web/svg/attribute/cy/index.md @@ -6,64 +6,47 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/cy --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".

+Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y. Если атрибут не определён, то эффект такой, как если бы было указано значение "0". -

Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента 100% соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение 50%.

+Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y небольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента **100%** соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение **50%**. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорииNone
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): The circle element
- SVG 1.1 (2nd Edition): The ellipse element
- SVG 1.1 (2nd Edition): The radialGradient element
+| Категории | None | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | [\](/ru/docs/Web/SVG/Content_type#Coordinate "https://developer.mozilla.org/en/SVG/Content_type#Coordinate") | +| Анимируемый | Да | +| Нормативные документы (en) | [SVG 1.1 (2nd Edition): The circle element](http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute) [SVG 1.1 (2nd Edition): The ellipse element](http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute) [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute) | -

{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}

+{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }} -

Пример

+## Пример -
  <svg width="120" height="220"
+```xml
+  
 
-    <style type="text/css" >
+    
+     
+
+```
 
-

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут cy

+Следующие элементы могут использовать атрибут `cy` -
    -
  • {{ SVGElement("circle") }}
  • -
  • {{ SVGElement("ellipse") }}
  • -
  • {{ SVGElement("radialGradient") }}
  • -
+- {{ SVGElement("circle") }} +- {{ SVGElement("ellipse") }} +- {{ SVGElement("radialGradient") }} diff --git a/files/ru/web/svg/attribute/d/index.md b/files/ru/web/svg/attribute/d/index.md index 9d8a7b537de31f..8dbd8b4cbc9676 100644 --- a/files/ru/web/svg/attribute/d/index.md +++ b/files/ru/web/svg/attribute/d/index.md @@ -3,161 +3,105 @@ title: d slug: Web/SVG/Attribute/d translation_of: Web/SVG/Attribute/d --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут d предоставляет определение пути для рисования.

+Атрибут **`d`** предоставляет определение пути для рисования. -

Определение пути - это список команд пути, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.

+Определение пути - это [список команд пути](#Path_commands), в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды. -

Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}

+Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}} -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="red"
+```html
+
+  
+       Q 10,60 10,30 z" />
+
+```
 
-

{{EmbedLiveSample('Example', '100%', 200)}}

-
+{{EmbedLiveSample('Example', '100%', 200)}} -

path

+## path -

Для {{SVGElement('path')}}, d - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')

+Для {{SVGElement('path')}}, `d` - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown') - - - - - - - - - - - - - - - -
Value<string>
Default valuenone
AnimatableYes
+| Value | **[\](/docs/Web/SVG/Content_type#String)** | +| ------------- | -------------------------------------------------- | +| Default value | _none_ | +| Animatable | Yes | -

glyph

+## glyph -

Warning: Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.

+> **Предупреждение:** Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться. -

Для {{SVGElement('glyph')}}, d является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

+Для {{SVGElement('glyph')}}, `d` является строкой, содержащей серию команд пути, которые определяют форму контура глифа. - - - - - - - - - - - - - - - -
Value<string>
Default valuenone
AnimatableYes
+| Value | **[\](/docs/Web/SVG/Content_type#String)** | +| ------------- | -------------------------------------------------- | +| Default value | _none_ | +| Animatable | Yes | -

Сноска: Точка происхождения (координата 0,0) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет своё происхождение в левом нижнем углу своего бокса.

+> **Примечание:** **Сноска:** Точка происхождения (координата `0`,`0`) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет своё происхождение в левом нижнем углу своего бокса. -

missing-glyph

+## missing-glyph -

Внимание: Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.

+> **Предупреждение:** **Внимание:** Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться. -

Для {{SVGElement('missing-glyph')}}, d является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

+Для {{SVGElement('missing-glyph')}}, `d` является строкой, содержащей серию команд пути, которые определяют форму контура глифа. - - - - - - - - - - - - - - - -
Value<string>
Default valuenone
AnimatableYes
+| Value | **[\](/docs/Web/SVG/Content_type#String)** | +| ------------- | -------------------------------------------------- | +| Default value | _none_ | +| Animatable | Yes | -

Команды пути

+## Команды пути -

(Path commands)

+_(Path commands)_ -

Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.

+Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды. -

SVG определяет 6 типов команд пути для всех 20 команд:

+SVG определяет 6 типов команд пути для всех 20 команд: -
    -
  • MoveTo: M, m
  • -
  • LineTo: L, l, H, h, V, v
  • -
  • Cubic Bézier Curve: C, c, S, s
  • -
  • Quadratic Bézier Curve: Q, q, T, t
  • -
  • Elliptical Arc Curve: A, a
  • -
  • ClosePath: Z, z
  • -
+- MoveTo: `M`, `m` +- LineTo: `L`, `l`, `H`, `h`, `V`, `v` +- Cubic Bézier Curve: `C`, `c`, `S`, `s` +- Quadratic Bézier Curve: `Q`, `q`, `T`, `t` +- Elliptical Arc Curve: `A`, `a` +- ClosePath: `Z`, `z` -

Примечание: Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.

+> **Примечание:** Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции. -

Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.

+Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх. -

Команды перемещения

+### Команды перемещения -

(MoveTo path commands)

+_(MoveTo path commands)_ -

MoveTo инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.

+_MoveTo_ инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии. -

Примечание: Хорошей практикой является открытие всех путей с помощью команды moveto, потому что без начального moveto команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределённому поведению.

+> **Примечание:** Хорошей практикой является открытие всех путей с помощью команды **moveto**, потому что без начального **moveto** команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределённому поведению. - - - - - - - - - - - - - - - - - - -
КомандаПараметрыПримечания
M(x, y)+Движение начала следующего под-пути к координатам x,y. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).
- Формула: Pn = {x, y}
m(dx, dy)+ -

Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на dx вдоль оси x и на dy вдоль оси y. Любая последующая пара координат считается неявной относительной командой LineTo (l) (см. ниже)
- Формула: Pn= {xo + dx, yo + dy}

-
+| Команда | Параметры | Примечания | +| ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| M | (`x`, `y`)+ | Движение начала следующего под-пути к координатам `x`,`y`. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже). Формула: Pn = {`x`, `y`} | +| m | (`dx`, `dy`)+ | Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на `dx` вдоль оси `x` и на `dy` вдоль оси `y`. Любая последующая пара координат считается неявной относительной командой LineTo (`l`) (см. ниже) Формула: Pn= {xo + `dx`, yo + `dy`} | -

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="red"
+```html
+
+  
+       m-20,10 h 10" />
+
+```
 
-

{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}

+{{EmbedLiveSample('Команды_перемещения', '100%', 200)}} -

LineTo path commands

+### LineTo path commands -

LineTo инструкции проводят прямую линию от current point (Po; {xo, yo}), до end point (Pn; {xn, yn}), на основе указанных параметров. Конечная точка end point (Pn) становится текущей точкой для следующей команды (Po').

+_LineTo_ инструкции проводят прямую линию от _current point_ (Po; {xo, yo}), до _end point_ (Pn; {xn, yn}), на основе указанных параметров. Конечная точка _end point_ (Pn) становится текущей точкой для следующей команды (Po'). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandParametersNotes
L(x, y)+ -

Рисует линию из текущей точки в конечную точку определённую x,y. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (L). Формула: Po' = Pn = {x, y}

-
l(dx, dy)+Draw a line from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (l) command (see below).
Hx+Draw a horizontal line from the current point to the new x coordinate (y coordinate stay unchanged). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (H) command.
hdx+Draw a horizontal line from the current point to a point shift by dx along the the x-axis (y coordinate stay unchanged). The current point get its X coordinate updated by dx for the next command. All subsequente value are considered an implicite relative horizontal LineTo (h) command.
Vy+Draw a vertical line from the current point to the new y coordinate (x coordinate stay unchanged). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (V) command.
vdy+Draw a vertical line from the current point to a point shift by dy along the y-axis (x coordinate stay unchanged). The current point get its Y coordinate updated by dy for the next command. All subsequente value are considered an implicite relative vertical LineTo (v) command.
+| Command | Parameters | Notes | +| ------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| L | (`x`, `y`)+ | Рисует линию из _текущей точки в конечную точку определённую_ `x`,`y`. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (`L`). Формула: Po' = Pn = {`x`, `y`} | +| l | (`dx`, `dy`)+ | Draw a line from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (`l`) command (_see below_). | +| H | `x`+ | Draw a horizontal line from the current point to the new `x` coordinate (_y coordinate stay unchanged_). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (`H`) command. | +| h | `dx`+ | Draw a horizontal line from the current point to a point shift by `dx` along the the x-axis (_y coordinate stay unchanged_). The current point get its X coordinate updated by `dx` for the next command. All subsequente value are considered an implicite relative horizontal LineTo (`h`) command. | +| V | `y`+ | Draw a vertical line from the current point to the new `y` coordinate (_x coordinate stay unchanged_). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (`V`) command. | +| v | `dy`+ | Draw a vertical line from the current point to a point shift by `dy` along the y-axis (_x coordinate stay unchanged_). The current point get its Y coordinate updated by `dy` for the next command. All subsequente value are considered an implicite relative vertical LineTo (`v`) command. | -

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- LineTo commands in absolute coordinates -->
-  <path fill="none" stroke="red"
+```html
+
+  
+  
 
-  <!-- LineTo commands in relative coordinates -->
-  <path fill="none" stroke="red"
+  
+  
+           h -40" />
+
+```
 
-

{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}

+{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}} -

Cubic Bézier Curve

+### Cubic Bézier Curve -

Cubic Bézier curves are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.

+_Cubic [Bézier curves](https://en.wikipedia.org/wiki/Bézier_curve)_ are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature. - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandParametersNotes
C(x1,y1, x2,y2, x,y)+Draw a Bézier curve from the current point to the coordinate x,y. x1,y1 are the coordinates of the control point at the begining of the curve where x2,y2 are the coordinates of the controle point at the end of the curve. The coordinate x,y become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (C) command.
c(dx1,dy1, dx2,dy2, dx,dy)+Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx1,dy1 are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and dx2,dy2 are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (c) command.
S(x2,y2, x,y)+Draw a smooth Bézier curve from the current point to the coordinate x,y. x2,y2 are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate x,y become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (S) command.
s(dx2,dy2, dx,dy)+Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx2,dy2 are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (s) command.
+| Command | Parameters | Notes | +| ------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ | Draw a Bézier curve from the current point to the coordinate `x`,`y`. `x1`,`y1` are the coordinates of the control point at the begining of the curve where `x2`,`y2` are the coordinates of the controle point at the end of the curve. The coordinate `x`,`y` become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (`C`) command. | +| c | (`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+ | Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx1`,`dy1` are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and `dx2`,`dy2` are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (`c`) command. | +| S | (`x2`,`y2`, `x`,`y`)+ | Draw a smooth Bézier curve from the current point to the coordinate `x`,`y`. `x2`,`y2` are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate `x`,`y` become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (`S`) command. | +| s | (`dx2`,`dy2`, `dx`,`dy`)+ | Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx2`,`dy2` are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (`s`) command. | -

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+```html
+
 
-  <!-- Quadratic Bézier curve with absolute coordinate -->
-  <path fill="none" stroke="red"
+  
+  
 
-  <!-- Quadratic Bézier curve with relative coordinate -->
-  <path fill="none" stroke="red"
+  
+  
 
-  <!-- Highlight the curve vertex and control points -->
-  <g id="ControlPoints">
+  
+  
 
-    <!-- First cubic command control points -->
-    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
-    <circle cx="30" cy="90" r="1.5"/>
+    
+    
+    
 
-    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
-    <circle cx="25" cy="10" r="1.5"/>
+    
+    
 
-    <!-- Second smooth command control points (the first one is implicite) -->
-    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
-    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
+    
+    
+    
 
-    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
-    <circle cx="70" cy="90" r="1.5" />
+    
+    
 
-    <!-- curve vertex points -->
-    <circle cx="10" cy="90" r="1.5"/>
-    <circle cx="50" cy="10" r="1.5"/>
-    <circle cx="90" cy="90" r="1.5"/>
-  </g>
-  <use xlink:href="#ControlPoints" x="100" />
-</svg>
+ + + + + + + +``` -

{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}

+{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}} -

Quadratic Bézier Curve

+### Quadratic Bézier Curve -

Quadratic Bézier curves are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.

+_Quadratic [Bézier curves](https://en.wikipedia.org/wiki/Bézier_curve)_ are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature. - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandParametersNotes
Q(x1,y1, x,y)+Draw a Bézier curve from the current point to the coordinate x,y. x1,y1 are the coordinates of the control point for the curve. The coordinate x,y become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (Q) command.
q(dx1,dy1, dx,dy)+Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx1,dy1 are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (q) command.
T(x,y)+Draw a smooth Bézier curve from the current point to the coordinate x,y. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate x,y become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (T) command.
t(dx,dy)+Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (t) command.
+| Command | Parameters | Notes | +| ------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Q | (`x1`,`y1`, `x`,`y`)+ | Draw a Bézier curve from the current point to the coordinate `x`,`y`. `x1`,`y1` are the coordinates of the control point for the curve. The coordinate `x`,`y` become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (`Q`) command. | +| q | (`dx1`,`dy1`, `dx`,`dy`)+ | Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx1`,`dy1` are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (`q`) command. | +| T | (`x`,`y`)+ | Draw a smooth Bézier curve from the current point to the coordinate `x`,`y`. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate `x`,`y` become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (`T`) command. | +| t | (`dx`,`dy`)+ | Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (`t`) command. | -

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+```html
+
 
-  <!-- Quadratic Bézier curve with implicite repetition -->
-  <path fill="none" stroke="red"
+  
+  
 
-  <!-- Highlight the curve vertex and control points -->
-  <g>
-    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
-    <circle cx="25" cy="25" r="1.5" />
+  
+  
+    
+    
 
-    <!-- curve vertex points -->
-    <circle cx="10" cy="50" r="1.5"/>
-    <circle cx="40" cy="50" r="1.5"/>
+    
+    
+    
 
-    <g id="SmoothQuadraticDown">
-      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
-      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
-      <circle cx="70" cy="50" r="1.5" />
-    </g>
+    
+      
+      
+      
+    
 
-    <g id="SmoothQuadraticUp">
-      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
-      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
-      <circle cx="100" cy="50" r="1.5" />
-    </g>
+    
+      
+      
+      
+    
 
-    <use xlink:href="#SmoothQuadraticDown" x="60" />
-    <use xlink:href="#SmoothQuadraticUp"   x="60" />
-    <use xlink:href="#SmoothQuadraticDown" x="120" />
-  </g>
-</svg>
+ + + + + +``` -

{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}

+{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}} -

Elliptical Arc Curve

+### Elliptical Arc Curve -

Elliptical arc curves are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.

+_Elliptical arc curves_ are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves. - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
CommandParametersNotes
A(rx ry angle large-arc-flag sweep-flag x y)+ -

Draw an Arc curve from the current point to the coordinate x,y. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:

- -
    -
  • rx and ry are the two radii of the ellipse;
  • -
  • angle represente a rotation (in degree) of the ellipse relative to the x-axis;
  • -
  • large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. -
      -
    • large-arc-flag allows to chose one of the large arc (1) or small arc (0),
    • -
    • sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0)
    • -
    -
  • -
- The coordinate x,y become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (A) command.
a(rx ry angle large-arc-flag sweep-flag dx dy)+ -

Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:

- -
    -
  • rx and ry are the two radii of the ellipse;
  • -
  • angle represente a rotation (in degree) of the ellipse relative to the x-axis;
  • -
  • large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. -
      -
    • large-arc-flag allows to chose one of the large arc (1) or small arc (0),
    • -
    • sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0)
    • -
    -
  • -
- The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente set of parameters are considered implicite relative arc curve (a) command.
CommandParametersNotes
A + (rx ry angle + large-arc-flag sweep-flag x + y)+ + +

+ Draw an Arc curve from the current point to the coordinate + x,y. The center of the ellipse used to draw + the arc is determine automatically based on the other parameters of + the command: +

+
    +
  • + rx and ry are the two radii of the + ellipse; +
  • +
  • + angle represente a rotation (in degree) of the ellipse + relative to the x-axis; +
  • +
  • + large-arc-flag and sweep-flag allows to + chose which arc must be drawn as 4 possible arcs can be drawn out of + the other parameters. +
      +
    • + large-arc-flag allows to chose one of the large arc + (1) or small arc (0), +
    • +
    • + sweep-flag allows to chose one of the clockwise + turning arc (1) or anticlockwise turning arc + (0) +
    • +
    +
  • +
+ The coordinate x,y become the new current + point for the next command. All subsequente set of parameters are + considered implicite absolute arc curve (A) command. +
a + (rx ry angle + large-arc-flag sweep-flag dx + dy)+ + +

+ Draw an Arc curve from the current point to to a point for which + coordinates are those of the current point shifted by + dx along the x-axis and dy along the y-axis. + The center of the ellipse used to draw the arc is determine + automatically based on the other parameters of the command: +

+
    +
  • + rx and ry are the two radii of the + ellipse; +
  • +
  • + angle represente a rotation (in degree) of the ellipse + relative to the x-axis; +
  • +
  • + large-arc-flag and sweep-flag allows to + chose which arc must be drawn as 4 possible arcs can be drawn out of + the other parameters. +
      +
    • + large-arc-flag allows to chose one of the large arc + (1) or small arc (0), +
    • +
    • + sweep-flag allows to chose one of the clockwise + turning arc (1) or anticlockwise turning arc + (0) +
    • +
    +
  • +
+ The current point gets its X and Y coordinates shifted by + dx and dy for the next command. All + subsequente set of parameters are considered implicite relative arc + curve (a) command. +
-

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- The influence of the arc flags on which arc is drawn -->
-  <path fill="none" stroke="red"
+  
+  
 
-  <path fill="none" stroke="lime"
+  
 
-  <path fill="none" stroke="purple"
+  
 
-  <path fill="none" stroke="pink"
+  
+           A 6 4 10 0 0 14,10" />
+
+```
 
-

{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}

+{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}} -

ClosePath

+### ClosePath -

ClosePath instructions draw a straight line from the current position, to the first point in the path.

+_ClosePath_ instructions draw a straight line from the current position, to the first point in the path. - - - - - - - - - - - - - -
CommandParametersNotes
Z, zClose the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.
+| Command | Parameters | Notes | +| ------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Z, z | | Close the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points. | -

Note: The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.

+> **Примечание:** The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates. -

Examples

+#### Examples - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
+           z" />
+
+```
 
-

{{EmbedLiveSample('ClosePath', '100%', 200)}}

+{{EmbedLiveSample('ClosePath', '100%', 200)}} -

Specification

+## Specification - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("SVG2", "paths.html#DProperty", "d")}}{{Spec2("SVG2")}}Definition for <path>
{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}{{Spec2("SVG1.1")}}Initial definition for <glyph> and <missing-glyph>
{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}{{Spec2("SVG1.1")}}Initial definition for <path>
+| Specification | Status | Comment | +| ------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------------------ | +| {{SpecName("SVG2", "paths.html#DProperty", "d")}} | {{Spec2("SVG2")}} | Definition for `` | +| {{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}} | {{Spec2("SVG1.1")}} | Initial definition for `` and `` | +| {{SpecName("SVG1.1", "paths.html#DAttribute", "d")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | diff --git a/files/ru/web/svg/attribute/dur/index.md b/files/ru/web/svg/attribute/dur/index.md index dfbf42951e4c57..0c001c836b1a2d 100644 --- a/files/ru/web/svg/attribute/dur/index.md +++ b/files/ru/web/svg/attribute/dur/index.md @@ -6,69 +6,74 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/dur --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут dur отображает простую длительность анимации.

+Атрибут **`dur`** отображает простую длительность анимации. -

Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}

+Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}} -
- +} +``` -
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="0" width="100" height="100">
-    <animate attributeType="XML" attributeName="y" from="0" to="50"
-        dur="1s" repeatCount="indefinite"/>
-  </rect>
-  <rect x="120" y="0" width="100" height="100">
-    <animate attributeType="XML" attributeName="y" from="0" to="50"
-        dur="3s" repeatCount="indefinite"/>
-  </rect>
-</svg>
+```html + + + + + + + + +``` -

{{EmbedLiveSample("topExample", "220", "150")}}

-
+{{EmbedLiveSample("topExample", "220", "150")}} -

Примечания к использованию

+## Примечания к использованию - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Значение<clock-value> | indefinite | media
Значение по умолчаниюindefinite
АнимируемыйНет
Значение + <clock-value> + | indefinite | media +
Значение по умолчаниюindefinite
АнимируемыйНет
-
-
<clock-value>
-
Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (h), минутах (m), секундах (s) или миллисекундах (ms). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: hh:mm:ss.iii или mm:ss.iii
-
media
-
Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.
-
indefinite
-
Задаёт простую длительность, как незаданную
-
+- `` + - : Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (`h`), минутах (`m`), секундах (`s`) или миллисекундах (`ms`). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: `hh:mm:ss.iii` или `mm:ss.iii` +- `media` + - : Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media. +- `indefinite` + - : Задаёт простую длительность, как незаданную -
-

Примечание: Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}).

-
+> **Примечание:** Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}). -

Спецификации

+## Спецификации {{Specifications}} -

Совместимость с браузерами

+## Совместимость с браузерами -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/attribute/end/index.md b/files/ru/web/svg/attribute/end/index.md index 01878be2ca245c..004e9794a5c619 100644 --- a/files/ru/web/svg/attribute/end/index.md +++ b/files/ru/web/svg/attribute/end/index.md @@ -3,43 +3,26 @@ title: end slug: Web/SVG/Attribute/end translation_of: Web/SVG/Attribute/end --- -

« SVG Attribute reference home

- -

Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.

- -

Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для {{ SVGAttr("begin") }} атрибута .

- -

Usage context

- - - - - - - - - - - - - - - - - - - - -
CategoriesAnimation timing attribute
Value<End-value-list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
- -

Для типов значений, разрешённых в, <end-value-list> см. {{ SVGAttr("begin") }} атрибут.

- -

Examples

- -

Elements

- -

The following elements can use the end attribute

- - +« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") + +Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность. + +Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для {{ SVGAttr("begin") }} атрибута . + +## Usage context + +| Categories | Animation timing attribute | +| ------------------ | --------------------------------------------------------------------------- | +| Value | \ | +| Animatable | No | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#EndAttribute) | + +Для типов значений, разрешённых в, `` см. {{ SVGAttr("begin") }} атрибут. + +## Examples + +## Elements + +The following elements can use the `end` attribute + +- [Animation elements](/en/SVG/Element#Animation "en/SVG/Element#Animation") » diff --git a/files/ru/web/svg/attribute/fill-opacity/index.md b/files/ru/web/svg/attribute/fill-opacity/index.md index 46e46630be36e2..a44f2540fc66ce 100644 --- a/files/ru/web/svg/attribute/fill-opacity/index.md +++ b/files/ru/web/svg/attribute/fill-opacity/index.md @@ -6,64 +6,44 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/fill-opacity --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.

+Этот атрибут определяет прозрачность цвета заполнения содержимого элемента. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут оформления
Значение<opacity-value> | inherit
Предустановленное значение1
АнимируемыйДа
СпецификацияSVG 1.1 (2nd Edition)
+| Категория | Атрибут оформления | +| -------------------------- | ----------------------------------------------------------------------------------------------------- | +| Значение | [\](/en/SVG/Content_type#Opacity_value "en/SVG/Content_type#Opacity_value") \| inherit | +| Предустановленное значение | 1 | +| Анимируемый | Да | +| Спецификация | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty) | -

Примеры

+## Примеры -

SVG

+### SVG -
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="100" cy="100" r="100" />
-</svg>
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="100" cy="100" r="100" fill-opacity="0.25" />
-</svg>
+```html + + + + + + +``` -

результат

+### результат -

{{EmbedLiveSample('Примеры', 200, 200)}}

+{{EmbedLiveSample('Примеры', 200, 200)}} -

Элементы

+## Элементы -

Следующие группы элементов могут быть использованы с атрибутом fill-opacity:

+Следующие группы элементов могут быть использованы с атрибутом `fill-opacity`: - +- [Элементы графических форм (Shape elements](/en/SVG/Element#Shape "en/SVG/Element#Shape")) » +- [Текстовые элементы](/en/SVG/Element#TextContent "en/SVG/Element#TexteContent") » -

Смотрите также

+## Смотрите также -
    -
  • {{ SVGAttr("stroke-opacity") }}
  • -
  • {{ SVGAttr("opacity") }}
  • -
+- {{ SVGAttr("stroke-opacity") }} +- {{ SVGAttr("opacity") }} diff --git a/files/ru/web/svg/attribute/fill-rule/index.md b/files/ru/web/svg/attribute/fill-rule/index.md index 73118469f37c24..204c144fe8ccb9 100644 --- a/files/ru/web/svg/attribute/fill-rule/index.md +++ b/files/ru/web/svg/attribute/fill-rule/index.md @@ -3,156 +3,129 @@ title: fill-rule slug: Web/SVG/Attribute/fill-rule translation_of: Web/SVG/Attribute/fill-rule --- -
{{SVGRef}}
+{{SVGRef}} -

The fill-rule этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.

+The **`fill-rule`** этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры. -

Note: Атрибут представления, fill-rule может быть использован как CSS-свойство.

+> **Примечание:** Атрибут представления, `fill-rule` может быть использован как CSS-свойство. -

Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
-  <!-- Default value for fill-rule -->
-  <polygon fill-rule="nonzero" stroke="red"
-   points="50,0 21,90 98,35 2,35 79,90"/>
+```html
+
+  
+  
 
-  <!--
+  
+  
+
+```
+
+{{EmbedLiveSample('topExample', '100%', 200)}}
+
+## Примечания по использованию
+
+| Значение              | `nonzero` \| `evenodd` |
+| --------------------- | ---------------------- |
+| Значение по умолчанию | `nonzero`              |
+| Анимируемый           | Да                     |
+
+The `fill-rule` attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:
+
+### nonzero
+
+The value `nonzero` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.
+
+#### Example
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
+
+  
+  
 
-    <!--
+    
+  
+           M230,20 v50 h50 v-50 z"/>
+
+```
 
-

{{EmbedLiveSample('nonzero', '100%', 200)}}

+{{EmbedLiveSample('nonzero', '100%', 200)}} -

evenodd

+### evenodd -

The value evenodd determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

+The value `evenodd` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside. -

Example

+#### Example - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
-  <!-- Effect of evenodd fill rule on crossing path segments -->
-  <polygon fill-rule="evenodd" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/>
+```html
+
+  
+  
 
-  <!--
+  
+  
 
-    <!--
+    
+  
-
-

{{EmbedLiveSample('evenodd', '100%', 200)}}

- -

Browser compatibility

- - - -

{{Compat}}

- -

Specification

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG2")}}Definition for shapes and text
{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG1.1")}}Initial definition for shapes and text
+ M230,20 v50 h50 v-50 z"/> + +``` + +{{EmbedLiveSample('evenodd', '100%', 200)}} + +## Browser compatibility + +{{Compat}} + +## Specification + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------- | +| {{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}} | {{Spec2("SVG2")}} | Definition for shapes and text | +| {{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}} | {{Spec2("SVG1.1")}} | Initial definition for shapes and text | diff --git a/files/ru/web/svg/attribute/fill/index.md b/files/ru/web/svg/attribute/fill/index.md index f3376392fff12b..b5e0a5bc50474c 100644 --- a/files/ru/web/svg/attribute/fill/index.md +++ b/files/ru/web/svg/attribute/fill/index.md @@ -7,93 +7,59 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/fill --- -

« Справочник SVG атрибутов

- -

Атрибут fill имеет два значения в зависимости от используемого контекста.

- -

По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут fill может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.

- -

Для фигур и текста атрибут fill является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS

- -

Контекст использования

- -

Для анимируемых элементов

- - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибуты времени анимации
Значениеremove | freeze
АнимацияНет
Нормативный документSVG 1.1 (2nd Edition)
- -
-
remove (default)
-
Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).
-
freeze
-
Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).
-
- -

Для текста и форм

- - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
Значение -

<paint>, context-fill, context-stroke

-
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
- -

Примеры

- -

Пример 1: Простой SVG

- -
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="100" cy="100" r="100" fill="#666"/>
-</svg>
- -

Результат

- -

{{EmbedLiveSample('Пример_1_Простой_SVG', 200, 200)}}

- -

Использование context-fill

- -

Для информации об использовании нестандартного и ограниченного значения context-fillcontext-stroke) смотрите документацию {{cssxref("-moz-context-properties")}}.

- -

Смотрите также

- -

Следующие элементы могут использовать атрибут fill

- - +« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") + +Атрибут `fill` имеет два значения в зависимости от используемого контекста. + +По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут `fill` может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации. + +Для фигур и текста атрибут `fill` является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS + +## Контекст использования + +### Для анимируемых элементов + +| Категория | Атрибуты времени анимации | +| -------------------- | ---------------------------------------------------------------------------- | +| Значение | **remove** \| freeze | +| Анимация | Нет | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#FillAttribute) | + +- remove (default) + - : Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена). +- freeze + - : Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации). + +### Для текста и форм + +| Категория | Атрибут представления | +| -------------------- | ---------------------------------------------------------------------------------------------------- | +| Значение | [\](/en/SVG/Content_type#Paint "en/SVG/Content_type#Paint"), `context-fill`, `context-stroke` | +| Анимация | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillProperty) | + +## Примеры + +### Пример 1: Простой SVG + +```html + + + +``` + +#### Результат + +{{EmbedLiveSample('Пример_1_Простой_SVG', 200, 200)}} + +## Использование `context-fill` + +Для информации об использовании нестандартного и ограниченного значения `context-fill` (и `context-stroke`) смотрите документацию {{cssxref("-moz-context-properties")}}. + +## Смотрите также + +Следующие элементы могут использовать атрибут `fill` + +- [Animation elements](/en/SVG/Element#Animation_elements "en/SVG/Element#Animation") » +- [Shape elements](/en/SVG/Element#Shape "en/SVG/Element#Shape") » +- [Text content elements](/en/SVG/Element#TextContent "en/SVG/Element#TextContent") » diff --git a/files/ru/web/svg/attribute/font-weight/index.md b/files/ru/web/svg/attribute/font-weight/index.md index 2fc3ae2338a6f1..d07e4974c06edf 100644 --- a/files/ru/web/svg/attribute/font-weight/index.md +++ b/files/ru/web/svg/attribute/font-weight/index.md @@ -5,78 +5,60 @@ tags: - SVG translation_of: Web/SVG/Attribute/font-weight --- -

« SVG Attribute reference home

+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") -

Атрибут font-weight позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .

+`Атрибут font-weight` позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") . -

Как и любой атрибут представления, font-weight может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации.

+Как и любой атрибут представления, `font-weight` может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации. -

Контекст применения

+## Контекст применения - - - - - - - - - - - - - - - - - - - -
КатегорииАтрибут представления
Значенияnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
АнимируемостьДа
Нормативный документSVG 1.1 (2nd Edition)
+| Категории | Атрибут представления | +| -------------------- | ----------------------------------------------------------------------------------------------------------------- | +| Значения | **normal** \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| inherit | +| Анимируемость | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontWeightProperty) | -

Значение ключевых слов

+## Значение ключевых слов -
    -
  • bold - соответствует значению 700 - полужирное начертание
  • -
  • normal - соответствует значению 400 - нормальное начертание
  • -
  • bolder и lighter указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.
  • -
  • inherit - даёт указание браузеру унаследовать тип начертания от родительского элемента.
  • -
+- **bold** - соответствует значению **700** - полужирное начертание +- **normal** - соответствует значению **400** - нормальное начертание +- **bolder** и **lighter** указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение. +- **inherit** - даёт указание браузеру унаследовать тип начертания от родительского элемента. -

Предостережения

+## Предостережения -

Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.

+Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта. -

Пример

+## Пример -

css

+### css -
p.normal {font-weight:normal;}
+```css
+p.normal {font-weight:normal;}
 p.thick {font-weight:bold;}
-p.thicker {font-weight:900;}
+p.thicker {font-weight:900;} +``` -

html

+### html -
<p class="normal">This is a paragraph.</p>
-<p class="light">This is a paragraph.</p>
-<p class="thick">This is a paragraph.</p>
-<p class="thicker">This is a paragraph.</p>
-
+```html +

This is a paragraph.

+

This is a paragraph.

+

This is a paragraph.

+

This is a paragraph.

+``` -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут font-weight.

+Следующие элементы могут использовать атрибут `font-weight`. - +- [Text content elements](/en/SVG/Element#Text_content_elements "en/SVG/Element#Text_content_elements") » -

Поддержка браузерами

+## Поддержка браузерами -

{{Compat}}

+{{Compat}} -

Смотрите также

+## Смотрите также -
    -
  • {{ cssxref("font-weight","CSS font-weight") }}
  • -
+- {{ cssxref("font-weight","CSS font-weight") }} diff --git a/files/ru/web/svg/attribute/id/index.md b/files/ru/web/svg/attribute/id/index.md index 438745712109d9..0c9be27688de05 100644 --- a/files/ru/web/svg/attribute/id/index.md +++ b/files/ru/web/svg/attribute/id/index.md @@ -5,75 +5,65 @@ tags: - SVG translation_of: Web/SVG/Attribute/id --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут id присваивает уникальное имя элементу.

+Атрибут **`id`** присваивает уникальное имя элементу. -

Этот атрибут используется всеми элементами.

+Этот атрибут используется всеми элементами. -
-
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <style type="text/css">
-    <![CDATA[
+```html
+
+  
 
-  <rect id="smallRect" x="10" y="10" width="100" height="100" />
-</svg>
-
+ + +``` -

{{EmbedLiveSample("topExample", "120", "120")}}

-
+{{EmbedLiveSample("topExample", "120", "120")}} -

Примечания по использованию

+## Примечания по использованию - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Значение<id>
Значение по умолчаниюОтсутствует
АнимируемыйНет
Значение<id>
Значение по умолчаниюОтсутствует
АнимируемыйНет
-
-
<id>
-
-

Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.

+- \ -
-

Примечание: Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.

-
+ - : Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов. -

Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).

-
-
+ > **Примечание:** Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL. -

Спецификации

+ Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-). -{{Specifications}} - -

Совместимость с браузерами

+## Спецификации +{{Specifications}} +## Совместимость с браузерами -

{{Compat}}

+{{Compat}} -

Смотрите также

+## Смотрите также -
    -
  • HTML id
  • -
  • {{SVGAttr("class")}}
  • -
+- [HTML `id`](/ru/docs/Web/HTML/Global_attributes/id) +- {{SVGAttr("class")}} diff --git a/files/ru/web/svg/attribute/index.md b/files/ru/web/svg/attribute/index.md index 9eb36c6fb8bc98..95c635e09f04fd 100644 --- a/files/ru/web/svg/attribute/index.md +++ b/files/ru/web/svg/attribute/index.md @@ -10,452 +10,402 @@ tags: - Руководство translation_of: Web/SVG/Attribute --- -

« SVG / Справочник SVG элементов »

- -

Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведён список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.

- -

SVG Атрибуты от А до Я

- -
-

A

- -
    -
  • {{ SVGAttr("accent-height") }}
  • -
  • {{ SVGAttr("accumulate") }}
  • -
  • {{ SVGAttr("additive") }}
  • -
  • {{ SVGAttr("alignment-baseline") }}
  • -
  • {{ SVGAttr("allowReorder") }}
  • -
  • {{ SVGAttr("alphabetic") }}
  • -
  • {{ SVGAttr("amplitude") }}
  • -
  • {{ SVGAttr("arabic-form") }}
  • -
  • {{ SVGAttr("ascent") }}
  • -
  • {{ SVGAttr("attributeName") }}
  • -
  • {{ SVGAttr("attributeType") }}
  • -
  • {{ SVGAttr("azimuth") }}
  • -
- -

B

- -
    -
  • {{ SVGAttr("baseFrequency") }}
  • -
  • {{ SVGAttr("baseline-shift") }}
  • -
  • {{ SVGAttr("baseProfile") }}
  • -
  • {{ SVGAttr("bbox") }}
  • -
  • {{ SVGAttr("begin") }}
  • -
  • {{ SVGAttr("bias") }}
  • -
  • {{ SVGAttr("by") }}
  • -
- -

C

- -
    -
  • {{ SVGAttr("calcMode") }}
  • -
  • {{ SVGAttr("cap-height") }}
  • -
  • {{ SVGAttr("class") }}
  • -
  • {{ SVGAttr("clip") }}
  • -
  • {{ SVGAttr("clipPathUnits") }}
  • -
  • {{ SVGAttr("clip-path") }}
  • -
  • {{ SVGAttr("clip-rule") }}
  • -
  • {{ SVGAttr("color") }}
  • -
  • {{ SVGAttr("color-interpolation") }}
  • -
  • {{ SVGAttr("color-interpolation-filters") }}
  • -
  • {{ SVGAttr("color-profile") }}
  • -
  • {{ SVGAttr("color-rendering") }}
  • -
  • {{ SVGAttr("contentScriptType") }}
  • -
  • {{ SVGAttr("contentStyleType") }}
  • -
  • {{ SVGAttr("cursor") }}
  • -
  • {{ SVGAttr("cx") }}
  • -
  • {{ SVGAttr("cy") }}
  • -
- -

D

- -
    -
  • {{ SVGAttr("d") }}
  • -
  • {{ SVGAttr("descent") }}
  • -
  • {{ SVGAttr("diffuseConstant") }}
  • -
  • {{ SVGAttr("direction") }}
  • -
  • {{ SVGAttr("display") }}
  • -
  • {{ SVGAttr("divisor") }}
  • -
  • {{ SVGAttr("dominant-baseline") }}
  • -
  • {{ SVGAttr("dur") }}
  • -
  • {{ SVGAttr("dx") }}
  • -
  • {{ SVGAttr("dy") }}
  • -
- -

E

- -
    -
  • {{ SVGAttr("edgeMode") }}
  • -
  • {{ SVGAttr("elevation") }}
  • -
  • {{ SVGAttr("enable-background") }}
  • -
  • {{ SVGAttr("end") }}
  • -
  • {{ SVGAttr("exponent") }}
  • -
  • {{ SVGAttr("externalResourcesRequired") }}
  • -
- -

F

- -
    -
  • {{ SVGAttr("fill") }}
  • -
  • {{ SVGAttr("fill-opacity") }}
  • -
  • {{ SVGAttr("fill-rule") }}
  • -
  • {{ SVGAttr("filter") }}
  • -
  • {{ SVGAttr("filterRes") }}
  • -
  • {{ SVGAttr("filterUnits") }}
  • -
  • {{ SVGAttr("flood-color") }}
  • -
  • {{ SVGAttr("flood-opacity") }}
  • -
  • {{ SVGAttr("font-family") }}
  • -
  • {{ SVGAttr("font-size") }}
  • -
  • {{ SVGAttr("font-size-adjust") }}
  • -
  • {{ SVGAttr("font-stretch") }}
  • -
  • {{ SVGAttr("font-style") }}
  • -
  • {{ SVGAttr("font-variant") }}
  • -
  • {{ SVGAttr("font-weight") }}
  • -
  • {{ SVGAttr("format") }}
  • -
  • {{ SVGAttr("from") }}
  • -
  • {{ SVGAttr("fx") }}
  • -
  • {{ SVGAttr("fy") }}
  • -
- -

G

- -
    -
  • {{ SVGAttr("g1") }}
  • -
  • {{ SVGAttr("g2") }}
  • -
  • {{ SVGAttr("glyph-name") }}
  • -
  • {{ SVGAttr("glyph-orientation-horizontal") }}
  • -
  • {{ SVGAttr("glyph-orientation-vertical") }}
  • -
  • {{ SVGAttr("glyphRef") }}
  • -
  • {{ SVGAttr("gradientTransform") }}
  • -
  • {{ SVGAttr("gradientUnits") }}
  • -
- -

H

- -
    -
  • {{ SVGAttr("hanging") }}
  • -
  • {{ SVGAttr("height") }}
  • -
  • {{ SVGAttr("horiz-adv-x") }}
  • -
  • {{ SVGAttr("horiz-origin-x") }}
  • -
- -

I

- -
    -
  • {{ SVGAttr("id") }}
  • -
  • {{ SVGAttr("ideographic") }}
  • -
  • {{ SVGAttr("image-rendering") }}
  • -
  • {{ SVGAttr("in") }}
  • -
  • {{ SVGAttr("in2") }}
  • -
  • {{ SVGAttr("intercept") }}
  • -
- -

K

- -
    -
  • {{ SVGAttr("k") }}
  • -
  • {{ SVGAttr("k1") }}
  • -
  • {{ SVGAttr("k2") }}
  • -
  • {{ SVGAttr("k3") }}
  • -
  • {{ SVGAttr("k4") }}
  • -
  • {{ SVGAttr("kernelMatrix") }}
  • -
  • {{ SVGAttr("kernelUnitLength") }}
  • -
  • {{ SVGAttr("kerning") }}
  • -
  • {{ SVGAttr("keyPoints") }}
  • -
  • {{ SVGAttr("keySplines") }}
  • -
  • {{ SVGAttr("keyTimes") }}
  • -
- -

L

- -
    -
  • {{ SVGAttr("lang") }}
  • -
  • {{ SVGAttr("lengthAdjust") }}
  • -
  • {{ SVGAttr("letter-spacing") }}
  • -
  • {{ SVGAttr("lighting-color") }}
  • -
  • {{ SVGAttr("limitingConeAngle") }}
  • -
  • {{ SVGAttr("local") }}
  • -
- -

M

- -
    -
  • {{ SVGAttr("marker-end") }}
  • -
  • {{ SVGAttr("marker-mid") }}
  • -
  • {{ SVGAttr("marker-start") }}
  • -
  • {{ SVGAttr("markerHeight") }}
  • -
  • {{ SVGAttr("markerUnits") }}
  • -
  • {{ SVGAttr("markerWidth") }}
  • -
  • {{ SVGAttr("mask") }}
  • -
  • {{ SVGAttr("maskContentUnits") }}
  • -
  • {{ SVGAttr("maskUnits") }}
  • -
  • {{ SVGAttr("mathematical") }}
  • -
  • {{ SVGAttr("max") }}
  • -
  • {{ SVGAttr("media") }}
  • -
  • {{ SVGAttr("method") }}
  • -
  • {{ SVGAttr("min") }}
  • -
  • {{ SVGAttr("mode") }}
  • -
- -

N

- -
    -
  • {{ SVGAttr("name") }}
  • -
  • {{ SVGAttr("numOctaves") }}
  • -
- -

O

- -
    -
  • {{ SVGAttr("offset") }}
  • -
  • {{ SVGAttr("onabort") }}
  • -
  • {{ SVGAttr("onactivate") }}
  • -
  • {{ SVGAttr("onbegin") }}
  • -
  • {{ SVGAttr("onclick") }}
  • -
  • {{ SVGAttr("onend") }}
  • -
  • {{ SVGAttr("onerror") }}
  • -
  • {{ SVGAttr("onfocusin") }}
  • -
  • {{ SVGAttr("onfocusout") }}
  • -
  • {{ SVGAttr("onload") }}
  • -
  • {{ SVGAttr("onmousedown") }}
  • -
  • {{ SVGAttr("onmousemove") }}
  • -
  • {{ SVGAttr("onmouseout") }}
  • -
  • {{ SVGAttr("onmouseover") }}
  • -
  • {{ SVGAttr("onmouseup") }}
  • -
  • {{ SVGAttr("onrepeat") }}
  • -
  • {{ SVGAttr("onresize") }}
  • -
  • {{ SVGAttr("onscroll") }}
  • -
  • {{ SVGAttr("onunload") }}
  • -
  • {{ SVGAttr("onzoom") }}
  • -
  • {{ SVGAttr("opacity") }}
  • -
  • {{ SVGAttr("operator") }}
  • -
  • {{ SVGAttr("order") }}
  • -
  • {{ SVGAttr("orient") }}
  • -
  • {{ SVGAttr("orientation") }}
  • -
  • {{ SVGAttr("origin") }}
  • -
  • {{ SVGAttr("overflow") }}
  • -
  • {{ SVGAttr("overline-position") }}
  • -
  • {{ SVGAttr("overline-thickness") }}
  • -
- -

P

- -
    -
  • {{ SVGAttr("panose-1") }}
  • -
  • {{ SVGAttr("paint-order") }}
  • -
  • {{ SVGAttr("path") }}
  • -
  • {{ SVGAttr("pathLength") }}
  • -
  • {{ SVGAttr("patternContentUnits") }}
  • -
  • {{ SVGAttr("patternTransform") }}
  • -
  • {{ SVGAttr("patternUnits") }}
  • -
  • {{ SVGAttr("pointer-events") }}
  • -
  • {{ SVGAttr("points") }}
  • -
  • {{ SVGAttr("pointsAtX") }}
  • -
  • {{ SVGAttr("pointsAtY") }}
  • -
  • {{ SVGAttr("pointsAtZ") }}
  • -
  • {{ SVGAttr("preserveAlpha") }}
  • -
  • {{ SVGAttr("preserveAspectRatio") }}
  • -
  • {{ SVGAttr("primitiveUnits") }}
  • -
- -

R

- -
    -
  • {{ SVGAttr("r") }}
  • -
  • {{ SVGAttr("radius") }}
  • -
  • {{ SVGAttr("refX") }}
  • -
  • {{ SVGAttr("refY") }}
  • -
  • {{ SVGAttr("rendering-intent") }}
  • -
  • {{ SVGAttr("repeatCount") }}
  • -
  • {{ SVGAttr("repeatDur") }}
  • -
  • {{ SVGAttr("requiredExtensions") }}
  • -
  • {{ SVGAttr("requiredFeatures") }}
  • -
  • {{ SVGAttr("restart") }}
  • -
  • {{ SVGAttr("result") }}
  • -
  • {{ SVGAttr("rotate") }}
  • -
  • {{ SVGAttr("rx") }}
  • -
  • {{ SVGAttr("ry") }}
  • -
- -

S

- -
    -
  • {{ SVGAttr("scale") }}
  • -
  • {{ SVGAttr("seed") }}
  • -
  • {{ SVGAttr("shape-rendering") }}
  • -
  • {{ SVGAttr("slope") }}
  • -
  • {{ SVGAttr("spacing") }}
  • -
  • {{ SVGAttr("specularConstant") }}
  • -
  • {{ SVGAttr("specularExponent") }}
  • -
  • {{ SVGAttr("spreadMethod") }}
  • -
  • {{ SVGAttr("startOffset") }}
  • -
  • {{ SVGAttr("stdDeviation") }}
  • -
  • {{ SVGAttr("stemh") }}
  • -
  • {{ SVGAttr("stemv") }}
  • -
  • {{ SVGAttr("stitchTiles") }}
  • -
  • {{ SVGAttr("stop-color") }}
  • -
  • {{ SVGAttr("stop-opacity") }}
  • -
  • {{ SVGAttr("strikethrough-position") }}
  • -
  • {{ SVGAttr("strikethrough-thickness") }}
  • -
  • {{ SVGAttr("string") }}
  • -
  • {{ SVGAttr("stroke") }}
  • -
  • {{ SVGAttr("stroke-dasharray") }}
  • -
  • {{ SVGAttr("stroke-dashoffset") }}
  • -
  • {{ SVGAttr("stroke-linecap") }}
  • -
  • {{ SVGAttr("stroke-linejoin") }}
  • -
  • {{ SVGAttr("stroke-miterlimit") }}
  • -
  • {{ SVGAttr("stroke-opacity") }}
  • -
  • {{ SVGAttr("stroke-width") }}
  • -
  • {{ SVGAttr("style") }}
  • -
  • {{ SVGAttr("surfaceScale") }}
  • -
  • {{ SVGAttr("systemLanguage") }}
  • -
- -

T

- -
    -
  • {{ SVGAttr("tableValues") }}
  • -
  • {{ SVGAttr("target") }}
  • -
  • {{ SVGAttr("targetX") }}
  • -
  • {{ SVGAttr("targetY") }}
  • -
  • {{ SVGAttr("text-anchor") }}
  • -
  • {{ SVGAttr("text-decoration") }}
  • -
  • {{ SVGAttr("text-rendering") }}
  • -
  • {{ SVGAttr("textLength") }}
  • -
  • {{ SVGAttr("to") }}
  • -
  • {{ SVGAttr("transform") }}
  • -
  • {{ SVGAttr("type") }}
  • -
- -

U

- -
    -
  • {{ SVGAttr("u1") }}
  • -
  • {{ SVGAttr("u2") }}
  • -
  • {{ SVGAttr("underline-position") }}
  • -
  • {{ SVGAttr("underline-thickness") }}
  • -
  • {{ SVGAttr("unicode") }}
  • -
  • {{ SVGAttr("unicode-bidi") }}
  • -
  • {{ SVGAttr("unicode-range") }}
  • -
  • {{ SVGAttr("units-per-em") }}
  • -
- -

V

- -
    -
  • {{ SVGAttr("v-alphabetic") }}
  • -
  • {{ SVGAttr("v-hanging") }}
  • -
  • {{ SVGAttr("v-ideographic") }}
  • -
  • {{ SVGAttr("v-mathematical") }}
  • -
  • {{ SVGAttr("values") }}
  • -
  • {{ SVGAttr("version") }}
  • -
  • {{ SVGAttr("vert-adv-y") }}
  • -
  • {{ SVGAttr("vert-origin-x") }}
  • -
  • {{ SVGAttr("vert-origin-y") }}
  • -
  • {{ SVGAttr("viewBox") }}
  • -
  • {{ SVGAttr("viewTarget") }}
  • -
  • {{ SVGAttr("visibility") }}
  • -
- -

W

- -
    -
  • {{ SVGAttr("width") }}
  • -
  • {{ SVGAttr("widths") }}
  • -
  • {{ SVGAttr("word-spacing") }}
  • -
  • {{ SVGAttr("writing-mode") }}
  • -
- -

X

- -
    -
  • {{ SVGAttr("x") }}
  • -
  • {{ SVGAttr("x-height") }}
  • -
  • {{ SVGAttr("x1") }}
  • -
  • {{ SVGAttr("x2") }}
  • -
  • {{ SVGAttr("xChannelSelector") }}
  • -
  • {{ SVGAttr("xlink:actuate") }}
  • -
  • {{ SVGAttr("xlink:arcrole") }}
  • -
  • {{ SVGAttr("xlink:href") }}
  • -
  • {{ SVGAttr("xlink:role") }}
  • -
  • {{ SVGAttr("xlink:show") }}
  • -
  • {{ SVGAttr("xlink:title") }}
  • -
  • {{ SVGAttr("xlink:type") }}
  • -
  • {{ SVGAttr("xml:base") }}
  • -
  • {{ SVGAttr("xml:lang") }}
  • -
  • {{ SVGAttr("xml:space") }}
  • -
- -

Y

+« [SVG](/ru/docs/Web/SVG "ru/docs/Web/SVG") / [Справочник SVG элементов](/ru/docs/Web/SVG/Элемент "ru/docs/Web/SVG/Элемент") » + +Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведён список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают. + +## SVG Атрибуты от А до Я + +### A + +- {{ SVGAttr("accent-height") }} +- {{ SVGAttr("accumulate") }} +- {{ SVGAttr("additive") }} +- {{ SVGAttr("alignment-baseline") }} +- {{ SVGAttr("allowReorder") }} +- {{ SVGAttr("alphabetic") }} +- {{ SVGAttr("amplitude") }} +- {{ SVGAttr("arabic-form") }} +- {{ SVGAttr("ascent") }} +- {{ SVGAttr("attributeName") }} +- {{ SVGAttr("attributeType") }} +- {{ SVGAttr("azimuth") }} + +### B + +- {{ SVGAttr("baseFrequency") }} +- {{ SVGAttr("baseline-shift") }} +- {{ SVGAttr("baseProfile") }} +- {{ SVGAttr("bbox") }} +- {{ SVGAttr("begin") }} +- {{ SVGAttr("bias") }} +- {{ SVGAttr("by") }} + +### C + +- {{ SVGAttr("calcMode") }} +- {{ SVGAttr("cap-height") }} +- {{ SVGAttr("class") }} +- {{ SVGAttr("clip") }} +- {{ SVGAttr("clipPathUnits") }} +- {{ SVGAttr("clip-path") }} +- {{ SVGAttr("clip-rule") }} +- {{ SVGAttr("color") }} +- {{ SVGAttr("color-interpolation") }} +- {{ SVGAttr("color-interpolation-filters") }} +- {{ SVGAttr("color-profile") }} +- {{ SVGAttr("color-rendering") }} +- {{ SVGAttr("contentScriptType") }} +- {{ SVGAttr("contentStyleType") }} +- {{ SVGAttr("cursor") }} +- {{ SVGAttr("cx") }} +- {{ SVGAttr("cy") }} + +### D + +- {{ SVGAttr("d") }} +- {{ SVGAttr("descent") }} +- {{ SVGAttr("diffuseConstant") }} +- {{ SVGAttr("direction") }} +- {{ SVGAttr("display") }} +- {{ SVGAttr("divisor") }} +- {{ SVGAttr("dominant-baseline") }} +- {{ SVGAttr("dur") }} +- {{ SVGAttr("dx") }} +- {{ SVGAttr("dy") }} + +### E + +- {{ SVGAttr("edgeMode") }} +- {{ SVGAttr("elevation") }} +- {{ SVGAttr("enable-background") }} +- {{ SVGAttr("end") }} +- {{ SVGAttr("exponent") }} +- {{ SVGAttr("externalResourcesRequired") }} + +### F + +- {{ SVGAttr("fill") }} +- {{ SVGAttr("fill-opacity") }} +- {{ SVGAttr("fill-rule") }} +- {{ SVGAttr("filter") }} +- {{ SVGAttr("filterRes") }} +- {{ SVGAttr("filterUnits") }} +- {{ SVGAttr("flood-color") }} +- {{ SVGAttr("flood-opacity") }} +- {{ SVGAttr("font-family") }} +- {{ SVGAttr("font-size") }} +- {{ SVGAttr("font-size-adjust") }} +- {{ SVGAttr("font-stretch") }} +- {{ SVGAttr("font-style") }} +- {{ SVGAttr("font-variant") }} +- {{ SVGAttr("font-weight") }} +- {{ SVGAttr("format") }} +- {{ SVGAttr("from") }} +- {{ SVGAttr("fx") }} +- {{ SVGAttr("fy") }} + +### G + +- {{ SVGAttr("g1") }} +- {{ SVGAttr("g2") }} +- {{ SVGAttr("glyph-name") }} +- {{ SVGAttr("glyph-orientation-horizontal") }} +- {{ SVGAttr("glyph-orientation-vertical") }} +- {{ SVGAttr("glyphRef") }} +- {{ SVGAttr("gradientTransform") }} +- {{ SVGAttr("gradientUnits") }} + +### H + +- {{ SVGAttr("hanging") }} +- {{ SVGAttr("height") }} +- {{ SVGAttr("horiz-adv-x") }} +- {{ SVGAttr("horiz-origin-x") }} + +### I + +- {{ SVGAttr("id") }} +- {{ SVGAttr("ideographic") }} +- {{ SVGAttr("image-rendering") }} +- {{ SVGAttr("in") }} +- {{ SVGAttr("in2") }} +- {{ SVGAttr("intercept") }} + +### K + +- {{ SVGAttr("k") }} +- {{ SVGAttr("k1") }} +- {{ SVGAttr("k2") }} +- {{ SVGAttr("k3") }} +- {{ SVGAttr("k4") }} +- {{ SVGAttr("kernelMatrix") }} +- {{ SVGAttr("kernelUnitLength") }} +- {{ SVGAttr("kerning") }} +- {{ SVGAttr("keyPoints") }} +- {{ SVGAttr("keySplines") }} +- {{ SVGAttr("keyTimes") }} + +### L + +- {{ SVGAttr("lang") }} +- {{ SVGAttr("lengthAdjust") }} +- {{ SVGAttr("letter-spacing") }} +- {{ SVGAttr("lighting-color") }} +- {{ SVGAttr("limitingConeAngle") }} +- {{ SVGAttr("local") }} + +### M + +- {{ SVGAttr("marker-end") }} +- {{ SVGAttr("marker-mid") }} +- {{ SVGAttr("marker-start") }} +- {{ SVGAttr("markerHeight") }} +- {{ SVGAttr("markerUnits") }} +- {{ SVGAttr("markerWidth") }} +- {{ SVGAttr("mask") }} +- {{ SVGAttr("maskContentUnits") }} +- {{ SVGAttr("maskUnits") }} +- {{ SVGAttr("mathematical") }} +- {{ SVGAttr("max") }} +- {{ SVGAttr("media") }} +- {{ SVGAttr("method") }} +- {{ SVGAttr("min") }} +- {{ SVGAttr("mode") }} + +### N + +- {{ SVGAttr("name") }} +- {{ SVGAttr("numOctaves") }} + +### O + +- {{ SVGAttr("offset") }} +- {{ SVGAttr("onabort") }} +- {{ SVGAttr("onactivate") }} +- {{ SVGAttr("onbegin") }} +- {{ SVGAttr("onclick") }} +- {{ SVGAttr("onend") }} +- {{ SVGAttr("onerror") }} +- {{ SVGAttr("onfocusin") }} +- {{ SVGAttr("onfocusout") }} +- {{ SVGAttr("onload") }} +- {{ SVGAttr("onmousedown") }} +- {{ SVGAttr("onmousemove") }} +- {{ SVGAttr("onmouseout") }} +- {{ SVGAttr("onmouseover") }} +- {{ SVGAttr("onmouseup") }} +- {{ SVGAttr("onrepeat") }} +- {{ SVGAttr("onresize") }} +- {{ SVGAttr("onscroll") }} +- {{ SVGAttr("onunload") }} +- {{ SVGAttr("onzoom") }} +- {{ SVGAttr("opacity") }} +- {{ SVGAttr("operator") }} +- {{ SVGAttr("order") }} +- {{ SVGAttr("orient") }} +- {{ SVGAttr("orientation") }} +- {{ SVGAttr("origin") }} +- {{ SVGAttr("overflow") }} +- {{ SVGAttr("overline-position") }} +- {{ SVGAttr("overline-thickness") }} + +### P + +- {{ SVGAttr("panose-1") }} +- {{ SVGAttr("paint-order") }} +- {{ SVGAttr("path") }} +- {{ SVGAttr("pathLength") }} +- {{ SVGAttr("patternContentUnits") }} +- {{ SVGAttr("patternTransform") }} +- {{ SVGAttr("patternUnits") }} +- {{ SVGAttr("pointer-events") }} +- {{ SVGAttr("points") }} +- {{ SVGAttr("pointsAtX") }} +- {{ SVGAttr("pointsAtY") }} +- {{ SVGAttr("pointsAtZ") }} +- {{ SVGAttr("preserveAlpha") }} +- {{ SVGAttr("preserveAspectRatio") }} +- {{ SVGAttr("primitiveUnits") }} + +### R + +- {{ SVGAttr("r") }} +- {{ SVGAttr("radius") }} +- {{ SVGAttr("refX") }} +- {{ SVGAttr("refY") }} +- {{ SVGAttr("rendering-intent") }} +- {{ SVGAttr("repeatCount") }} +- {{ SVGAttr("repeatDur") }} +- {{ SVGAttr("requiredExtensions") }} +- {{ SVGAttr("requiredFeatures") }} +- {{ SVGAttr("restart") }} +- {{ SVGAttr("result") }} +- {{ SVGAttr("rotate") }} +- {{ SVGAttr("rx") }} +- {{ SVGAttr("ry") }} + +### S + +- {{ SVGAttr("scale") }} +- {{ SVGAttr("seed") }} +- {{ SVGAttr("shape-rendering") }} +- {{ SVGAttr("slope") }} +- {{ SVGAttr("spacing") }} +- {{ SVGAttr("specularConstant") }} +- {{ SVGAttr("specularExponent") }} +- {{ SVGAttr("spreadMethod") }} +- {{ SVGAttr("startOffset") }} +- {{ SVGAttr("stdDeviation") }} +- {{ SVGAttr("stemh") }} +- {{ SVGAttr("stemv") }} +- {{ SVGAttr("stitchTiles") }} +- {{ SVGAttr("stop-color") }} +- {{ SVGAttr("stop-opacity") }} +- {{ SVGAttr("strikethrough-position") }} +- {{ SVGAttr("strikethrough-thickness") }} +- {{ SVGAttr("string") }} +- {{ SVGAttr("stroke") }} +- {{ SVGAttr("stroke-dasharray") }} +- {{ SVGAttr("stroke-dashoffset") }} +- {{ SVGAttr("stroke-linecap") }} +- {{ SVGAttr("stroke-linejoin") }} +- {{ SVGAttr("stroke-miterlimit") }} +- {{ SVGAttr("stroke-opacity") }} +- {{ SVGAttr("stroke-width") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("surfaceScale") }} +- {{ SVGAttr("systemLanguage") }} + +### T + +- {{ SVGAttr("tableValues") }} +- {{ SVGAttr("target") }} +- {{ SVGAttr("targetX") }} +- {{ SVGAttr("targetY") }} +- {{ SVGAttr("text-anchor") }} +- {{ SVGAttr("text-decoration") }} +- {{ SVGAttr("text-rendering") }} +- {{ SVGAttr("textLength") }} +- {{ SVGAttr("to") }} +- {{ SVGAttr("transform") }} +- {{ SVGAttr("type") }} + +### U + +- {{ SVGAttr("u1") }} +- {{ SVGAttr("u2") }} +- {{ SVGAttr("underline-position") }} +- {{ SVGAttr("underline-thickness") }} +- {{ SVGAttr("unicode") }} +- {{ SVGAttr("unicode-bidi") }} +- {{ SVGAttr("unicode-range") }} +- {{ SVGAttr("units-per-em") }} + +### V + +- {{ SVGAttr("v-alphabetic") }} +- {{ SVGAttr("v-hanging") }} +- {{ SVGAttr("v-ideographic") }} +- {{ SVGAttr("v-mathematical") }} +- {{ SVGAttr("values") }} +- {{ SVGAttr("version") }} +- {{ SVGAttr("vert-adv-y") }} +- {{ SVGAttr("vert-origin-x") }} +- {{ SVGAttr("vert-origin-y") }} +- {{ SVGAttr("viewBox") }} +- {{ SVGAttr("viewTarget") }} +- {{ SVGAttr("visibility") }} + +### W + +- {{ SVGAttr("width") }} +- {{ SVGAttr("widths") }} +- {{ SVGAttr("word-spacing") }} +- {{ SVGAttr("writing-mode") }} -
    -
  • {{ SVGAttr("y") }}
  • -
  • {{ SVGAttr("y1") }}
  • -
  • {{ SVGAttr("y2") }}
  • -
  • {{ SVGAttr("yChannelSelector") }}
  • -
+### X -

Z

+- {{ SVGAttr("x") }} +- {{ SVGAttr("x-height") }} +- {{ SVGAttr("x1") }} +- {{ SVGAttr("x2") }} +- {{ SVGAttr("xChannelSelector") }} +- {{ SVGAttr("xlink:actuate") }} +- {{ SVGAttr("xlink:arcrole") }} +- {{ SVGAttr("xlink:href") }} +- {{ SVGAttr("xlink:role") }} +- {{ SVGAttr("xlink:show") }} +- {{ SVGAttr("xlink:title") }} +- {{ SVGAttr("xlink:type") }} +- {{ SVGAttr("xml:base") }} +- {{ SVGAttr("xml:lang") }} +- {{ SVGAttr("xml:space") }} -
    -
  • {{ SVGAttr("z") }}
  • -
  • {{ SVGAttr("zoomAndPan") }}
  • -
-
+### Y -

Категории

+- {{ SVGAttr("y") }} +- {{ SVGAttr("y1") }} +- {{ SVGAttr("y2") }} +- {{ SVGAttr("yChannelSelector") }} -

Атрибуты событий анимации

+### Z -

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+- {{ SVGAttr("z") }} +- {{ SVGAttr("zoomAndPan") }} -

Целевые атрибуты анимации

+## Категории -

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+### Атрибуты событий анимации -

Атрибуты времени анимации

+{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }} -

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+### Целевые атрибуты анимации -

Атрибуты значений анимации

+{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }} -

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}

+### Атрибуты времени анимации -

Атрибуты добавления анимации

+{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }} -

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+### Атрибуты значений анимации -

Атрибуты условий

+{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }} -

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+### Атрибуты добавления анимации -

Атрибуты ядра

+{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }} -

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}

+### Атрибуты условий -

Атрибуты событий документа

+{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}. -

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}

+### Атрибуты ядра -

Атрибуты простых фильтров

+{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }} -

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+### Атрибуты событий документа -

Атрибуты графических событий

+{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }} -

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+### Атрибуты простых фильтров -

Атрибуты представления

+{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }} -
Заметьте, что все атрибуты представления SVG можно использовать как CSS-свойства.
+### Атрибуты графических событий -

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }} -

Атрибуты передаточных функций

+### Атрибуты представления -

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+> **Примечание:** Заметьте, что все атрибуты представления SVG можно использовать как CSS-свойства. - +{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }} -

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

+### Атрибуты передаточных функций + +{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }} + +### XLink атрибуты + +{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }} diff --git a/files/ru/web/svg/attribute/keytimes/index.md b/files/ru/web/svg/attribute/keytimes/index.md index 63f069ed7b36b6..08a6a25a46b561 100644 --- a/files/ru/web/svg/attribute/keytimes/index.md +++ b/files/ru/web/svg/attribute/keytimes/index.md @@ -3,85 +3,68 @@ title: keyTimes slug: Web/SVG/Attribute/keyTimes translation_of: Web/SVG/Attribute/keyTimes --- -

« SVG Attribute reference home

+« [SVG Attribute reference home](/ru/docs/Web/SVG/Attribute "en-US/docs/Web/SVG/Attribute") -

Атрибут keyTimes представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке keyTimes задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

+Атрибут `keyTimes` представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке `keyTimes` задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации. -

Если указан список keyTimes, то в списке keyTimes должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .

+Если указан список `keyTimes`, то в списке `keyTimes` должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} . -

Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.

+Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени. -

Семантика списка keyTimes зависит от режима интерполяции:

+Семантика списка keyTimes зависит от режима интерполяции: -
    -
  • Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.
  • -
  • Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в keyTimes.
  • -
+- Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами. +- Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в `keyTimes`. -

Если в качестве режима интерполяции используется paced, атрибут keyTimes игнорируется.

+Если в качестве режима интерполяции используется _paced_, атрибут `keyTimes `игнорируется. -

Если в качестве параметра длительности выбрано indefinite, атрибут keyTimes игнорируется.

+Если в качестве параметра длительности выбрано _indefinite_, атрибут `keyTimes` игнорируется. -

Usage context

+## Usage context - - - - - - - - - - - - - - - - - - - -
CategoriesAnimation value attribute
Value<list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+| Categories | Animation value attribute | +| ------------------ | -------------------------------------------------------------------------------- | +| Value | \ | +| Animatable | No | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute) | -

Пример

+## Пример -
<?xml version="1.0"?>
-<svg width="120" height="120"
+```html
+
+
 
-    <circle cx="60" cy="10" r="10">
+    
 
-        <animate attributeName="cx"
+        
 
-        <animate attributeName="cy"
+        
 
-    </circle>
-</svg>
+ + +``` -

Демонстрация

+**Демонстрация** -

{{ EmbedLiveSample('Пример','120','120') }}

+{{ EmbedLiveSample('Пример','120','120') }} -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут keyTimes

+Следующие элементы могут использовать атрибут `keyTimes` -
    -
  • {{ SVGElement("animate") }}
  • -
  • {{ SVGElement("animateColor") }}
  • -
  • {{ SVGElement("animateMotion") }}
  • -
  • {{ SVGElement("animateTransform") }}
  • -
+- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateMotion") }} +- {{ SVGElement("animateTransform") }} diff --git a/files/ru/web/svg/attribute/lang/index.md b/files/ru/web/svg/attribute/lang/index.md index c714833039deb9..604bd1c3ce9098 100644 --- a/files/ru/web/svg/attribute/lang/index.md +++ b/files/ru/web/svg/attribute/lang/index.md @@ -5,62 +5,55 @@ tags: - SVG translation_of: Web/SVG/Attribute/lang --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут lang указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определённых элементов.

+Атрибут **`lang`** указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определённых элементов. -

Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется.

+Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется. -

В SVG 1.1 существовал атрибут lang, определённый с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в формате BCP 47. Глиф предназначался для использования, если атрибут xml:lang точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут xml:lang точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".

+В SVG 1.1 существовал атрибут `lang`, определённый с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в [формате BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt). Глиф предназначался для использования, если атрибут `xml:lang` точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут `xml:lang` точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-". -

Все элементы используют этот атрибут.

+Все элементы используют этот атрибут. -
-
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <text lang="en-US">This is some English text</text>
-</svg>
-
+```html + + This is some English text + +``` -

Примечания по использованию

+## Примечания по использованию - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Значение<language-tag>
Значение по умолчаниюОтсутствует
АнимируемыйНет
Значение<language-tag>
Значение по умолчаниюОтсутствует
АнимируемыйНет
-
-
<language-tag>
-
-

Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в спецификации BCP 47.

+- `` -

Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, en-US для американского английского языка или de-AT для австрийского немецкого.

-
-
+ - : Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в [спецификации BCP 47](https://tools.ietf.org/html/bcp47#section-2.1). -

Спецификации

+ Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, `en-US` для американского английского языка или `de-AT` для австрийского немецкого. -{{Specifications}} - -

Совместимость с браузерами

+## Спецификации +{{Specifications}} +## Совместимость с браузерами -

{{Compat}}

+{{Compat}} -

Смотрите также

+## Смотрите также - +- [Спецификация BCP 47 для тегов для идентификации языков](https://tools.ietf.org/html/bcp47) diff --git a/files/ru/web/svg/attribute/lengthadjust/index.md b/files/ru/web/svg/attribute/lengthadjust/index.md index 46013fbc3dc5d4..09d2741c95f9e5 100644 --- a/files/ru/web/svg/attribute/lengthadjust/index.md +++ b/files/ru/web/svg/attribute/lengthadjust/index.md @@ -3,31 +3,33 @@ title: lengthAdjust slug: Web/SVG/Attribute/lengthAdjust translation_of: Web/SVG/Attribute/lengthAdjust --- -

Когда SVG элемент <text> или <tspan> имеет конкретную длину, установленную с помощью атрибута textLengt, атрибут lengthAdjust контролирует как текст помещается в эту длину (растягивается или сжимается).

+Когда SVG элемент ``\*\* **или** \*\*`` имеет конкретную длину, установленную с помощью атрибута `textLengt`, атрибут `lengthAdjust` контролирует как текст помещается в эту длину (растягивается или сжимается). -

Существует 2 допустимых значения для атрибута lengthAdjust: spacing и spacingAndGlyphs. Используя spacing (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя spacingAndGlyphs весь тестовый элемент растягивается.

+Существует 2 допустимых значения для атрибута `lengthAdjust`: `spacing` и `spacingAndGlyphs`. Используя `spacing` (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя `spacingAndGlyphs` весь тестовый элемент растягивается. -

SVG текст с использованием lengthAdjust

+## SVG текст с использованием lengthAdjust -

HTML Content

+### HTML Content -
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
-   <g font-face="sans-serif">
-      <text x="0" y="20" textLength="300" lengthAdjust="spacing">
+```html
+
+   
+      
          Stretched using spacing only.
-      </text>
-      <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
+      
+      
          Stretched using spacing and glyphs.
-      </text>
-      <text x="0" y="80" textLength="100" lengthAdjust="spacing">
+      
+      
          Shrunk using spacing only.
-      </text>
-      <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
+      
+      
          Shrunk using spacing and glyphs.
-      </text>
-   </g>
-</svg>
+
+ + +``` -

Результат

+### Результат -

{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}

+{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }} diff --git a/files/ru/web/svg/attribute/letter-spacing/index.md b/files/ru/web/svg/attribute/letter-spacing/index.md index 4d63e32a7d3eec..4009da41c838e7 100644 --- a/files/ru/web/svg/attribute/letter-spacing/index.md +++ b/files/ru/web/svg/attribute/letter-spacing/index.md @@ -6,55 +6,36 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/letter-spacing --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Атрибут letter-spacing контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .

+Атрибут `letter-spacing` контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} . -

Для SVG, если значением атрибута выступает обыкновенное число (например, 128), браузер добавляет это к <length> в текущей системе координат пользователя.

+Для SVG, если значением атрибута выступает обыкновенное число (например, `128`), браузер добавляет это к [\](/en/SVG/Content_type#Length) в текущей системе координат пользователя. -

Если же значением атрибута выступают относительные величины, к примеру .25em или 1%, браузер преобразовывает их в <length> соответствующее значение в текущей системе координат пользователя.

+Если же значением атрибута выступают относительные величины, к примеру `.25em` или `1%`, браузер преобразовывает их в [\](/en/SVG/Content_type#Length) соответствующее значение в текущей системе координат пользователя. -

В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации.

+В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
Значениеnormal | <length> | inherit
Анимируется Да
Нормативный документSVG 1.1 (2nd Edition)
+| Категория | Атрибут представления | +| -------------------- | ----------------------------------------------------------------------------------- | +| Значение | normal \| [\](/en/SVG/Content_type#Length) \| **inherit** | +| Анимируется | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#LetterSpacingProperty) | -

{{ page("/en/SVG/Content_type","Length") }}

+{{ page("/en/SVG/Content_type","Length") }} -

Элементы

+## Элементы -

В следующих элементах можно использовать атрибут letter-spacing

+В следующих элементах можно использовать атрибут `letter-spacing` - +- [Элементы текстового контента](/en/SVG/Element#Text_content_elements), например `` и ``. -

Смотрите также

+## Смотрите также -
    -
  • {{ cssxref("letter-spacing","CSS letter-spacing") }}
  • -
+- {{ cssxref("letter-spacing","CSS letter-spacing") }} -

Примечание об использовании

+## Примечание об использовании -

Атрибут letter-spacing плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования letter-spacing. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; textNode.getComputedTextLength() возвращает точно такую же длину, letter-spacing установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.

+Атрибут `letter-spacing` плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования `letter-spacing`. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; `textNode.getComputedTextLength()` возвращает точно такую же длину, `letter-spacing` установлен или нет, что приводит к грубо неправильным результатам при разнесении букв. diff --git a/files/ru/web/svg/attribute/lighting-color/index.md b/files/ru/web/svg/attribute/lighting-color/index.md index 75f7a318eeb140..72a6c9b8393062 100644 --- a/files/ru/web/svg/attribute/lighting-color/index.md +++ b/files/ru/web/svg/attribute/lighting-color/index.md @@ -7,44 +7,24 @@ tags: - SVG фильтры translation_of: Web/SVG/Attribute/lighting-color --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Атрибут lighting-color определяет цвет источника света для примитивов фильтров {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.

+Атрибут `lighting-color` определяет цвет источника света для примитивов фильтров {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
ЗначениеcurrentColor | <color> | <icccolor> | inherit
Начальное значениеwhite
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+| Категория | Атрибут представления | +| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | currentColor \| [\](/en/SVG/Content_type#Color "en/SVG/Content_type#Color") \| [\](/en/SVG/Content_type#ICCColor "en/SVG/Content_type#ICCColor") \| inherit | +| Начальное значение | white | +| Анимация | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty) | -

Примеры

+## Примеры -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут lighting-color

+Следующие элементы могут использовать атрибут `lighting-color` -
    -
  • {{ SVGElement("feDiffuseLighting") }}
  • -
  • {{ SVGElement("feSpecularLighting") }}
  • -
+- {{ SVGElement("feDiffuseLighting") }} +- {{ SVGElement("feSpecularLighting") }} diff --git a/files/ru/web/svg/attribute/overflow/index.md b/files/ru/web/svg/attribute/overflow/index.md index 6cbba83639bdc9..b719af814cd21e 100644 --- a/files/ru/web/svg/attribute/overflow/index.md +++ b/files/ru/web/svg/attribute/overflow/index.md @@ -6,62 +6,41 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/overflow --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Атрибут overflow имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:

+Атрибут `overflow` имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты: -
    -
  • Атрибут overflow применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам{{ SVGElement("pattern") }} и {{ SVGElement("marker") }}, на все прочие элементы он не влияет.
  • -
  • Для элементов, к которым атрибут overflow может применяться, если он имеет значение hidden или scroll, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента {{ SVGElement("clipPath") }}, содержимое которого есть элемент {{ SVGElement("rect") }}, который определяет эквивалентный прямоугольник, и затем указанию <url> этого элемента {{ SVGElement("clipPath") }} равным значению атрибута {{ SVGAttr("clip-path") }} для данного элемента.
  • -
  • Если атрибут overflow имеет значение, отличное от hidden или scroll, он не оказывает действия.
  • -
  • Внутри SVG-содержимого значение auto эквивалентно значению visible.
  • -
  • Когда svg-элемент высшего уровня включён в HTML-код, если атрибут overflow имеет значение hidden или scroll, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.
  • -
  • Когда svg-элемент высшего уровня автономен, атрибут overflow на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.
  • -
  • Первоначальное значение overflow, как определено в CSS, есть visible, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту overflow элементов, устанавливающих новый порт просмотра, элементов pattern и marker значение hidden.
  • -
+- Атрибут `overflow` применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам{{ SVGElement("pattern") }} и {{ SVGElement("marker") }}, на все прочие элементы он не влияет. +- Для элементов, к которым атрибут `overflow` может применяться, если он имеет значение `hidden` или `scroll`, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента {{ SVGElement("clipPath") }}, содержимое которого есть элемент {{ SVGElement("rect") }}, который определяет эквивалентный прямоугольник, и затем указанию \ этого элемента {{ SVGElement("clipPath") }} равным значению атрибута {{ SVGAttr("clip-path") }} для данного элемента. +- Если атрибут `overflow` имеет значение, отличное от `hidden` или `scroll`, он не оказывает действия. +- Внутри SVG-содержимого значение `auto` эквивалентно значению `visible`. +- Когда svg-элемент высшего уровня включён в HTML-код, если атрибут `overflow` имеет значение `hidden` или `scroll`, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки. +- Когда svg-элемент высшего уровня автономен, атрибут `overflow` на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра. +- Первоначальное значение `overflow`, как определено в CSS, есть `visible`, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту `overflow` элементов, устанавливающих новый порт просмотра, элементов `pattern` и `marker` значение `hidden`. -

Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.

+Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорииПрезентационный атрибут
Значениеvisible | hidden | scroll | auto | inherit
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
+| Категории | Презентационный атрибут | +| -------------------- | --------------------------------------------------------------------------------- | +| Значение | visible \| hidden \| scroll \| auto \| inherit | +| Анимируемый | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/masking.html#OverflowProperty) | -

Пример

+## Пример -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут overflow

+Следующие элементы могут использовать атрибут `overflow` -
    -
  • {{ SVGElement("svg") }}
  • -
  • {{ SVGElement("symbol") }}
  • -
  • {{ SVGElement("image") }}
  • -
  • {{ SVGElement("foreignObject") }}
  • -
  • {{ SVGElement("pattern") }}
  • -
  • {{ SVGElement("marker") }}
  • -
+- {{ SVGElement("svg") }} +- {{ SVGElement("symbol") }} +- {{ SVGElement("image") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("pattern") }} +- {{ SVGElement("marker") }} -

Смотрите также

+## Смотрите также -
    -
  • {{ cssxref("overflow","CSS overflow") }}
  • -
+- {{ cssxref("overflow","CSS overflow") }} diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.md b/files/ru/web/svg/attribute/patterncontentunits/index.md index 1d84c1b336551e..420dfa5643a80e 100644 --- a/files/ru/web/svg/attribute/patterncontentunits/index.md +++ b/files/ru/web/svg/attribute/patterncontentunits/index.md @@ -3,50 +3,31 @@ title: patternContentUnits slug: Web/SVG/Attribute/patternContentUnits translation_of: Web/SVG/Attribute/patternContentUnits --- -

« SVG Attribute reference home

- -

Атрибут patternContentUnits определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе.

- -

Если patternContentUnits атрибут не определён, то его значение предполагается равным userSpaceOnUse.

- -

Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение patternContentUnits равным objectBoundingBox, значения, указанные в процентах, будут пересчитаны, как если бы вы задали userSpaceOnUse.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
CategoriesNone
ValueuserSpaceOnUse | objectBoundingBox
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
- -
-
userSpaceOnUse
-
Пользовательская система координат {{ SVGElement("pattern") }} element is the coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.
-
objectBoundingBox
-
Пользовательская система координат для содержимого {{ SVGElement("pattern") }} элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.
-
- -

Примеры

- -

Элементы

- -

Атрибут patternContentUnits может быть определён на следующих элементах:

- -
    -
  • {{ SVGElement("pattern") }}
  • -
+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") + +Атрибут `patternContentUnits` определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе. + +Если `patternContentUnits` атрибут не определён, то его значение предполагается равным `userSpaceOnUse`. + +Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение `patternContentUnits` равным `objectBoundingBox`, значения, указанные в процентах, будут пересчитаны, как если бы вы задали `userSpaceOnUse`. + +## Контекст использования + +| Categories | _None_ | +| ------------------ | ------------------------------------------------------------------------------------------------------------ | +| Value | `userSpaceOnUse` \| **`objectBoundingBox`** | +| Animatable | Yes | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute) | + +- userSpaceOnUse + - : Пользовательская система координат {{ SVGElement("pattern") }} element is the coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}. +- objectBoundingBox + - : Пользовательская система координат для содержимого {{ SVGElement("pattern") }} элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}. + +## Примеры + +## Элементы + +Атрибут `patternContentUnits` может быть определён на следующих элементах: + +- {{ SVGElement("pattern") }} diff --git a/files/ru/web/svg/attribute/r/index.md b/files/ru/web/svg/attribute/r/index.md index 3a8c54a1a9c53b..2baa6eb2552386 100644 --- a/files/ru/web/svg/attribute/r/index.md +++ b/files/ru/web/svg/attribute/r/index.md @@ -3,127 +3,68 @@ title: r slug: Web/SVG/Attribute/r translation_of: Web/SVG/Attribute/r --- -
{{SVGRef}}
- -
Атрибут r устанавливает значение радиуса круга.
- -
- -

Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}

- -
- - -
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <radialGradient r="0" id="myGradient000">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-  <radialGradient r="50%" id="myGradient050">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-  <radialGradient r="100%" id="myGradient100">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-
-  <circle cx="50"  cy="50" r="0"/>
-  <circle cx="150" cy="50" r="25"/>
-  <circle cx="250" cy="50" r="50"/>
-
-  <rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" />
-  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
-  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
-</svg>
- -

{{EmbedLiveSample('topExample', '100%', 200)}}

-
- -

circle

- -

Для {{SVGElement('circle')}}, r устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.

- - - - - - - - - - - - - - - - -
Значение<length>| <percentage>
-

Значение по умолчанию

-
0
АнимируемостьДа
- -

Примечание: Начиная с SVG2, r является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.

- -

radialGradient

- -

Для {{ SVGElement("radialGradient") }}, r устанавливает радиус конечной окружности радиального градиента.

- -

Градиент будет нарисован таким образом, чтобы 100% конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
Значение по умолчанию50%
АнимируемостьДа
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("SVG2", "geometry.html#R", "r")}}{{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}} - {{Spec2("SVG2")}} Definition for SVG2 paint servers <radialGradient> -
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}} - {{Spec2("SVG1.1")}}Initial definition for <radialGradient>
{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}} - {{Spec2("SVG1.1")}}Initial definition for <circle>
+{{SVGRef}}Атрибут r устанавливает значение радиуса круга. + +Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}} + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +{{EmbedLiveSample('topExample', '100%', 200)}} + +## circle + +Для {{SVGElement('circle')}}, `r` устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)**\| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| --------------------- | --------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `0` | +| Анимируемость | Да | + +> **Примечание:** Начиная с SVG2, **r** является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов. + +## radialGradient + +Для {{ SVGElement("radialGradient") }}, `r` устанавливает радиус конечной окружности радиального градиента. + +Градиент будет нарисован таким образом, чтобы **100%** конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| --------------------- | ---------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `50%` | +| Анимируемость | Да | + +## Спецификации + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------- | +| {{SpecName("SVG2", "geometry.html#R", "r")}} | {{Spec2("SVG2")}} | Definition as a geometry property | +| {{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}} | {{Spec2("SVG2")}} | Definition for SVG2 paint servers `` | +| {{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | diff --git a/files/ru/web/svg/attribute/repeatcount/index.md b/files/ru/web/svg/attribute/repeatcount/index.md index e2ef55e21a70c3..85f3528dc66760 100644 --- a/files/ru/web/svg/attribute/repeatcount/index.md +++ b/files/ru/web/svg/attribute/repeatcount/index.md @@ -3,45 +3,28 @@ title: repeatCount slug: Web/SVG/Attribute/repeatCount translation_of: Web/SVG/Attribute/repeatCount --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Данный атрибут задаёт, сколько раз должна выполняться анимация.

+Данный атрибут задаёт, сколько раз должна выполняться анимация. -

Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.

+Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля. -

Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite".

+Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite". -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут времени анимации
Значение<number> | "indefinite"
АнимируемыйНет
Ссылка на стандартSVG 1.1 (2nd Edition)
+| Категория | Атрибут времени анимации | +| ------------------ | ------------------------------------------------------------------------------------------------------------------- | +| Значение | [\](/en/SVG/Content_type#Number "https://developer.mozilla.org/en/SVG/Content_type#Number") \| "indefinite" | +| Анимируемый | Нет | +| Ссылка на стандарт | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute) | -

{{ page("/en/SVG/Content_type","Number") }}

+{{ page("/en/SVG/Content_type","Number") }} -

Пример

+## Пример -

Элементы

+## Элементы -

Данные элементы могут использовать атрибут repeatCount

+Данные элементы могут использовать атрибут repeatCount - +- [Animation elements](/en/SVG/Element#Animation "en/SVG/Element#Animation") » diff --git a/files/ru/web/svg/attribute/rx/index.md b/files/ru/web/svg/attribute/rx/index.md index 4148552178e913..87a1cdad35b304 100644 --- a/files/ru/web/svg/attribute/rx/index.md +++ b/files/ru/web/svg/attribute/rx/index.md @@ -5,111 +5,62 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/rx --- -
{{SVGRef}}
- -

Атрибут rx определяет радиус круга по оси x.

- -

Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}

- -
- - -
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="50"  cy="50" rx="0"  ry="25" />
-  <ellipse cx="150" cy="50" rx="25" ry="25" />
-  <ellipse cx="250" cy="50" rx="50" ry="25" />
-
-  <rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/>
-  <rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/>
-  <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/>
-</svg>
- -

{{EmbedLiveSample('topExample', '100%', 200)}}

-
- -

ellipse

- -

Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
- -

Примечание. Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

- -

rect

- -

Для {{SVGElement('rect')}}, rx определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

- -

Способ интерпретации значения атрибута rx зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:

- -
    -
  • Если правильно задано значение для rx, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
  • -
  • Если ни rx, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
  • -
  • Если rx больше половины ширины прямоугольника, то браузер будет считать значение rx половиной ширины прямоугольника.
  • -
- - - - - - - - - - - - - - - - -
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
- -

Примечание. Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для rect.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "geometry.html#RX", "rx")}}{{Spec2("SVG2")}}Определяется как свойство геометрии
{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}{{Spec2("SVG1.1")}} -

Начальное определение для <ellipse>

-
{{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}{{Spec2("SVG1.1")}}Начальное определение для <rect>
+{{SVGRef}} + +Атрибут **`rx`** определяет радиус круга по оси x. + +Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}} + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + +``` + +{{EmbedLiveSample('topExample', '100%', 200)}} + +## ellipse + +Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** \| `auto` | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `auto` | +| Анимируемый | Да | + +> **Примечание:** **Примечание.** Начиная с **SVG2**, **rx** - _свойство геометрии(Geometry Property)._ Это означает, что атрибут также можно использовать как свойство CSS для эллипсов. + +## rect + +Для {{SVGElement('rect')}}, `rx` определяет радиус эллипса по оси x, используется для скругления углов прямоугольника. + +Способ интерпретации значения атрибута `rx` зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника: + +- Если правильно задано значение для `rx`, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному. +- Если ни `rx`, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами. +- Если `rx` больше половины ширины прямоугольника, то браузер будет считать значение `rx` половиной ширины прямоугольника. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** \| `auto` | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `auto` | +| Анимируемый | Да | + +> **Примечание:** **Примечание.** Начиная с **SVG2**, **rx** - _свойство геометрии(Geometry Property)._ Это означает, что атрибут также можно использовать как свойство CSS для rect. + +## Specifications + +| Спецификация | Статус | Комментарий | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------ | +| {{SpecName("SVG2", "geometry.html#RX", "rx")}} | {{Spec2("SVG2")}} | Определяется как свойство геометрии | +| {{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}} | {{Spec2("SVG1.1")}} | Начальное определение для \ | +| {{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}} | {{Spec2("SVG1.1")}} | Начальное определение для `` | diff --git a/files/ru/web/svg/attribute/ry/index.md b/files/ru/web/svg/attribute/ry/index.md index 074d44f18c11ac..3ed1a930968e45 100644 --- a/files/ru/web/svg/attribute/ry/index.md +++ b/files/ru/web/svg/attribute/ry/index.md @@ -5,109 +5,62 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/ry --- -
{{SVGRef}}
- -

Атрибут ry определяет радиус круга по оси y.

- -

Два элемента используют этот атрибут: <ellipse> и <rect>

- -
- - -
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="50"  cy="50" ry="0"  rx="25" />
-  <ellipse cx="150" cy="50" ry="25" rx="25" />
-  <ellipse cx="250" cy="50" ry="50" rx="25" />
-
-  <rect x="20"  y="120" width="60" height="60" ry="0"   rx="15"/>
-  <rect x="120" y="120" width="60" height="60" ry="15"  rx="15"/>
-  <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/>
-</svg>
- -

{{EmbedLiveSample('topExample', '100%', 200)}}

-
- -

ellipse

- -

Для элемента {{SVGElement('ellipse')}}, ry определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
- -

Примечание. Начиная с SVG2, ry - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

- -

rect

- -

Для {{SVGElement('rect')}}, ry определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

- -

Способ интерпретации значения атрибута ry зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:

- -
    -
  • Если правильно задано значение для ry, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
  • -
  • Если ни ry, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
  • -
  • Если ry больше половины ширины прямоугольника, то браузер будет считать значение ry половиной ширины прямоугольника.
  • -
- - - - - - - - - - - - - - - - -
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
- -

Примечание. Начиная с SVG2, ry - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для rect.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "geometry.html#RY", "ry")}}{{Spec2("SVG2")}}Определяется как свойство геометрии
{{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}}{{Spec2("SVG1.1")}}Начальное определение для <ellipse>
{{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}}{{Spec2("SVG1.1")}}Начальное определение для <rect>
+{{SVGRef}} + +Атрибут **`ry`** определяет радиус круга по оси y. + +Два элемента используют этот атрибут: [``](/ru/docs/Web/SVG/Element/ellipse "Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!") и [``](/ru/docs/Web/SVG/Element/rect "Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!") + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + +``` + +{{EmbedLiveSample('topExample', '100%', 200)}} + +## ellipse + +Для элемента {{SVGElement('ellipse')}}, `ry` определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** \| `auto` | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `auto` | +| Анимируемый | Да | + +> **Примечание:** **Примечание.** Начиная с **SVG2**, **ry** - _свойство геометрии(Geometry Property)._ Это означает, что атрибут также можно использовать как свойство CSS для эллипсов. + +## rect + +Для {{SVGElement('rect')}}, `ry` определяет радиус эллипса по оси x, используется для скругления углов прямоугольника. + +Способ интерпретации значения атрибута `ry` зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника: + +- Если правильно задано значение для `ry`, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному. +- Если ни `ry`, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами. +- Если `ry` больше половины ширины прямоугольника, то браузер будет считать значение `ry` половиной ширины прямоугольника. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** \| `auto` | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| Значение по умолчанию | `auto` | +| Анимируемый | Да | + +> **Примечание:** **Примечание.** Начиная с **SVG2**, **ry** - _свойство геометрии(Geometry Property)._ Это означает, что атрибут также можно использовать как свойство CSS для rect. + +## Specifications + +| Спецификация | Статус | Комментарий | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------- | +| {{SpecName("SVG2", "geometry.html#RY", "ry")}} | {{Spec2("SVG2")}} | Определяется как свойство геометрии | +| {{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}} | {{Spec2("SVG1.1")}} | Начальное определение для `` | +| {{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}} | {{Spec2("SVG1.1")}} | Начальное определение для `` | diff --git a/files/ru/web/svg/attribute/shape-rendering/index.md b/files/ru/web/svg/attribute/shape-rendering/index.md index bf5c55d82e9893..ea010a551fd09b 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.md +++ b/files/ru/web/svg/attribute/shape-rendering/index.md @@ -3,77 +3,48 @@ title: shape-rendering slug: Web/SVG/Attribute/shape-rendering translation_of: Web/SVG/Attribute/shape-rendering --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute) -

При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. shape-rendering предоставляет возможность указывать данные рекомендации.

+При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. `shape-rendering` предоставляет возможность указывать данные рекомендации. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
Значенияauto | optimizeSpeed | crispEdges | geometricPrecision | inherit
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+| Категория | Атрибут представления | +| -------------------- | ---------------------------------------------------------------------------------------- | +| Значения | **auto** \| optimizeSpeed \| crispEdges \| geometricPrecision \| inherit | +| Анимация | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty) | -
-
auto
-
Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, чёткие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и чётким краями.
-
optimizeSpeed
-
Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и чётким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур.
-
crispEdges
-
Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краёв рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата чёткости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краёв с пикселями устройства.
-
geometricPrecision
-
Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и чёткими краям.
-
+- auto + - : Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, чёткие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и чётким краями. +- optimizeSpeed + - : Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и чётким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур. +- crispEdges + - : Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краёв рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата чёткости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краёв с пикселями устройства. +- geometricPrecision + - : Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и чёткими краям. -

Пример

+## Пример -
<svg xmlns="http://www.w3.org/2000/svg"
+```xml
+
+  shape-rendering="optimizeSpeed">
+```
 
-
- 
-  
-   
-   
-  
- 
-
-

shape-rendering: geometricPrecision:

+| shape-rendering: geometricPrecision:![shape-rendering:geometricPrecision](http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg) | shape-rendering: optimizeSpeed![shape-rendering:optimizeSpeed](http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg) | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -

shape-rendering:geometricPrecision

-
-

shape-rendering: optimizeSpeed

+Также можно воспользоваться css shape-rendering: -

shape-rendering:optimizeSpeed

-
- -

Также можно воспользоваться css shape-rendering:

- -
<svg xmlns="http://www.w3.org/2000/svg"
+```xml
+
+  style="shape-rendering:optimizeSpeed;">
+```
 
-

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут shape-rendering

+Следующие элементы могут использовать атрибут `shape-rendering` - +- [Shape elements](/en/SVG/Element#Shape "en/SVG/Element#Shape") » diff --git a/files/ru/web/svg/attribute/stop-color/index.md b/files/ru/web/svg/attribute/stop-color/index.md index c16dc7e717daa9..d8d8aa4352e0e2 100644 --- a/files/ru/web/svg/attribute/stop-color/index.md +++ b/files/ru/web/svg/attribute/stop-color/index.md @@ -3,49 +3,27 @@ title: stop-color slug: Web/SVG/Attribute/stop-color translation_of: Web/SVG/Attribute/stop-color --- -

« Справочник SVG атрибутов

- -

Атрибут stop-color указывает какой цвет использовать при остановке градиента. Значения currentColor и ICC цвета могут быть заданы так же, как в <paint> спецификации для атрибутов {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
ЗначениеcurrentColor | <color> | <icccolor> | inherit
Начальное значениеblack
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
- -

Примеры

- -

Элементы

- -

Следующие элементы могут использовать атрибут stop-color

- -
    -
  • {{ SVGElement("stop") }}
  • -
- -

Смотрите также

- -
    -
  • {{ SVGAttr("stop-opacity") }}
  • -
+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute) + +Атрибут `stop-color` указывает какой цвет использовать при остановке градиента. Значения `currentColor` и ICC цвета могут быть заданы так же, как в [\](/en/SVG/Content_type#Paint "en/SVG/Content_type#Paint") спецификации для атрибутов {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}. + +## Контекст использования + +| Категория | Атрибут представления | +| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | currentColor \| [\](/en/SVG/Content_type#Color "en/SVG/Content_type#Color") \| [\](/en/SVG/Content_type#ICCColor "en/SVG/Content_type#ICCColor") \| inherit | +| Начальное значение | black | +| Анимация | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty) | + +## Примеры + +## Элементы + +Следующие элементы могут использовать атрибут `stop-color` + +- {{ SVGElement("stop") }} + +## Смотрите также + +- {{ SVGAttr("stop-opacity") }} diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.md b/files/ru/web/svg/attribute/stroke-dashoffset/index.md index 0738fbbf0168f5..b7e68098cb0bdc 100644 --- a/files/ru/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.md @@ -6,157 +6,135 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/stroke-dashoffset --- -
-

Прежняя редакция: « Справочник SVG атрибутов
- Этот атрибут определяет смещение обводки относительно начального положения.
- При использовании <percentage>, значение будет вычисляться от текущего viewport.
- Значение может быть отрицательным.

-
+> **Примечание:** **Прежняя редакция:** « [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") +> Этот атрибут определяет смещение обводки относительно начального положения. +> При использовании [\](/ru/SVG/Content_type#Percentage "ru/SVG/Content_type#Percentage"), значение будет вычисляться от текущего viewport. +> Значение может быть отрицательным. -

{{SVGRef}}
- Атрибут stroke-dashoffset определяет сдвиг массива dash array относительно начального положения.

+{{SVGRef}} +Атрибут **`stroke-dashoffset`** определяет сдвиг массива **dash array** относительно начального положения. -

Сноска: Атрибут stroke-dashoffset может использоваться как свойство CSS.

+> **Примечание:** **Сноска:** Атрибут `stroke-dashoffset` может использоваться как свойство CSS. -

Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
-  <!-- Без dash array -->
-  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+```html
+
+  
+  
 
-  <!-- Без dash offset -->
-  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
-        stroke-dasharray="3 1" />
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
+
+```
+
+{{EmbedLiveSample('topExample', '100%', 200)}}
+
+## Usage context
+
+| Категория         | Атрибут оформления                                                                                                                                                    |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение          | [\](/en/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") \| [\](/en/SVG/Content_type#Length "en/SVG/Content_type#Length") \| inherit |
+| Исходное значение | 0                                                                                                                                                                     |
+| Анимируемый       | Да                                                                                                                                                                    |
+| Спецификация      | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty)                                                                            |
+
+## Пример
+
+### HTML
+
+```html
+
+
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+```
 
-

Результат

+### Результат -

{{EmbedLiveSample('Пример', '220', '240')}}

+{{EmbedLiveSample('Пример', '220', '240')}} -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут stroke-dashoffset

+Следующие элементы могут использовать атрибут `stroke-dashoffset` - +- [Элементы форм](/ru/SVG/Element#Shape "ru/SVG/Element#Shape") » +- [Текстовые элементы](/ru/SVG/Element#TextContent "ru/SVG/Element#TextContent") » diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.md b/files/ru/web/svg/attribute/stroke-linecap/index.md index 8557b240323b52..a1d30fef3a3655 100644 --- a/files/ru/web/svg/attribute/stroke-linecap/index.md +++ b/files/ru/web/svg/attribute/stroke-linecap/index.md @@ -3,169 +3,159 @@ title: stroke-linecap slug: Web/SVG/Attribute/stroke-linecap translation_of: Web/SVG/Attribute/stroke-linecap --- -
{{SVGRef}}
+{{SVGRef}} -

Атрибут stroke-linecap - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.

+Атрибут **`stroke-linecap`** - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании. -

Сноска: В качестве атрибута представления можно использовать stroke-linecap в качестве свойства CSS.

+> **Примечание:** **Сноска:** В качестве атрибута представления можно использовать `stroke-linecap` в качестве свойства CSS. -

В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- Effect of the (default) "butt" value -->
-  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
-        stroke-linecap="butt" />
+  
+  
 
-  <!-- Effect of the "round" value -->
-  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
-        stroke-linecap="round" />
+  
+  
 
-  <!-- Effect of the "square" value -->
-  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
-        stroke-linecap="square" />
+  
+  
 
-  <!--
+  
+  
+
+```
 
-

{{EmbedLiveSample('topExample', '100%', 200)}}

-
+{{EmbedLiveSample('topExample', '100%', 200)}} -

Нотации

+## Нотации - - - - - - - - - - - - - - - -
Valuebutt | round | square
Default valuebutt
AnimatableYes
+| Value | `butt` \| `round` \| `square` | +| ------------- | ----------------------------- | +| Default value | `butt` | +| Animatable | Yes | -

butt

+### butt -

Значение butt указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.

+Значение `butt` указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще. -

Пример

+#### Пример - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- Effect of the "butt" value -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="butt" />
+  
+  
 
-  <!-- Effect of the "butt" value on a zero length path -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="butt" />
+  
+  
 
 
-  <!--
+  
+  
+  
+  
+  
+
+```
 
-

{{EmbedLiveSample('butt', '100%', 200)}}

+{{EmbedLiveSample('butt', '100%', 200)}} -

round

+### round -

Значение round указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.

+Значение `round` указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути. -

Пример

+#### Пример - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- Effect of the "round" value -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="round" />
+  
+  
 
-  <!-- Effect of the "round" value on a zero length path -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="round" />
+  
+  
 
 
-  <!--
+  
+  
+  
+  
+  
+
+```
 
-

{{EmbedLiveSample('round', '100%', 200)}}

+{{EmbedLiveSample('round', '100%', 200)}} -

square

+### square -

Значение square указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.

+Значение `square` указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути. -

Пример

+#### Пример - +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- Effect of the "square" value -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="square" />
+  
+  
 
-  <!-- Effect of the "square" value on a zero length path -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="square" />
+  
+  
 
 
-  <!--
+  
+  
+  
+  
+  
+
+```
 
-

{{EmbedLiveSample('square', '100%', 200)}}

+{{EmbedLiveSample('square', '100%', 200)}} -

Совместимость браузера

+## Совместимость браузера -

{{Compat}}

+{{Compat}} -

Спецификация

+## Спецификация {{Specifications}} diff --git a/files/ru/web/svg/attribute/stroke-width/index.md b/files/ru/web/svg/attribute/stroke-width/index.md index 2e15a788b4201f..f6c3fc71069972 100644 --- a/files/ru/web/svg/attribute/stroke-width/index.md +++ b/files/ru/web/svg/attribute/stroke-width/index.md @@ -3,55 +3,40 @@ title: stroke-width slug: Web/SVG/Attribute/stroke-width translation_of: Web/SVG/Attribute/stroke-width --- -

« Справочник SVG атрибутов

- -

Атрибут stroke-width указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется <percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.
-
- В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS

- -

Usage context

- - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
Значения<length> | <percentage> | inherit
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
- -

Example

- -

SVG

- -
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="100" cy="100" r="100" />
-</svg>
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="100" cy="100" r="100" stroke="#ff0" stroke-width="10" />
-</svg>
- -

Результат

- -

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

- -

Элементы

- -

Следующие элементы могут использовать атрибут stroke-width.

- - +« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") + +Атрибут `stroke-width` указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется \, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован. + +В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS + +## Usage context + +| **Категория** | Атрибут представления | +| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Значения** | [\](/en/SVG/Content_type#Length "en/SVG/Content_type#Length") \| [\](/en/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") \| inherit | +| **Анимируемый** | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty) | + +## Example + +### SVG + +```html + + + + + + +``` + +### Результат + +{{EmbedLiveSample('Example', 200, 200)}} + +## Элементы + +Следующие элементы могут использовать атрибут `stroke-width`. + +- [Элементы форм](/ru/SVG/Element#Shape "en/SVG/Element#Shape") » +- [Текстовые элементы](/ru/SVG/Element#TextContent "en/SVG/Element#TextContent") » diff --git a/files/ru/web/svg/attribute/stroke/index.md b/files/ru/web/svg/attribute/stroke/index.md index f144a04107c7c2..c25ea3f809f2ed 100644 --- a/files/ru/web/svg/attribute/stroke/index.md +++ b/files/ru/web/svg/attribute/stroke/index.md @@ -6,64 +6,49 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/stroke --- -

« SVG Attribute reference home

+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") -

Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — None.

+Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — **None**. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорияPresentation attribute
Значения -

<paint>, context-fill, context-stroke

-
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
+| Категория | Presentation attribute | +| -------------------- | ---------------------------------------------------------------------------------------------------- | +| Значения | [\](/en/SVG/Content_type#Paint "en/SVG/Content_type#Paint"), `context-fill`, `context-stroke` | +| Анимируемый | Да | +| Нормативный документ | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#StrokeProperty) | -

Примеры

+## Примеры -

SVG Line с stroke

+### SVG Line с stroke -

Пример 1: Нарисуйте прямую зелёную линию, используя stroke.

+#### Пример 1: Нарисуйте прямую зелёную линию, используя **stroke**. -
<svg height="50" width="300">
-    <path stroke="green" d="M5 20 1215 0" />
-</svg>
+```html + + + +``` -

{{EmbedLiveSample('Пример_1_Нарисуйте_прямую_зелёную_линию_используя_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}

+{{EmbedLiveSample('Пример_1_Нарисуйте_прямую_зелёную_линию_используя_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}} -

Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke.

+#### Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke. -
​​<svg height="100" width="100">
-    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
-</svg>
+```html +​​ + + +``` -

{{EmbedLiveSample('Пример_2_Нарисуйте_чёрный_круг_с_синей_рамкой_используя_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}}

+{{EmbedLiveSample('Пример_2_Нарисуйте_чёрный_круг_с_синей_рамкой_используя_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}} -

Использование context-stroke

+## Использование `context-stroke` -

Информацию об использовании значения нестандартного и ограниченного context-strokecontext-fill) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}.

+Информацию об использовании значения нестандартного и ограниченного `context-stroke` (и `context-fill`) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}. -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут stroke.

+Следующие элементы могут использовать атрибут `stroke`. - +- [Shape elements](/en/SVG/Element#Shape "en/SVG/Element#Shape") » +- [Text content elements](/en/SVG/Element#TextContent "en/SVG/Element#TextContent") » diff --git a/files/ru/web/svg/attribute/text-anchor/index.md b/files/ru/web/svg/attribute/text-anchor/index.md index 2b5ff26b9768cb..8781d3f25551b8 100644 --- a/files/ru/web/svg/attribute/text-anchor/index.md +++ b/files/ru/web/svg/attribute/text-anchor/index.md @@ -3,105 +3,80 @@ title: text-anchor slug: Web/SVG/Attribute/text-anchor translation_of: Web/SVG/Attribute/text-anchor --- -

« Справочник SVG Атрибутов

- -

Атрибут text-anchor используется для выравнивания
- (start-, middle- или end-выравнивание) текстовой строки относительно заданной точки.

- -

Атрибут text-anchor применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }} атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента.

- -

Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
КатегорияАтрибут представления
Значениеstart | middle | end | inherit
АнимацияДа
ДокументSVG 1.1 (2nd Edition)
- -
-
start
-
-

Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиатского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.

-
-
middle
-
-

Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
- между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
- позиции.)

-
-
end
-
Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалентно
- правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
-
Примечание
-
В IE-11 атрибут text-anchor не имеет эффекта при привязке текста к заданному пути path посредством тега textPath.
- В приведённом ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.
-
- -

Пример

- -
<html>
-<head>
-    <meta charset="utf-8">
-    <title>текст в якорях</title>
-</head>
-<body>
-<div style="background-color:burlywood; width:866px;height:444px;display:flex;">
-    <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;">
-        <svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1">
-            <!-- Материализация якорей -->
-            <path d="M50, 5 L50,95
+« [Справочник SVG Атрибутов](/en/SVG/Attribute "en/SVG/Attribute")
+
+Атрибут `text-anchor` используется для выравнивания
+_(start-, middle- или end-выравнивание)_ текстовой строки относительно заданной точки.
+
+**А**трибут `text-anchor` применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }} атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента.
+
+Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.
+
+## Контекст использования
+
+| Категория | Атрибут представления                                                          |
+| --------- | ------------------------------------------------------------------------------ |
+| Значение  | start \| middle \| end \| **inherit**                                          |
+| Анимация  | Да                                                                             |
+| Документ  | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/text.html#TextAnchorProperty) |
+
+- start
+  - : Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиатского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.
+- middle
+  - : Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
+    между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
+    позиции.)
+- end
+  - : Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалентно
+    правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
+- Примечание
+  - : В **IE**-11 атрибут **`text-anchor`** не имеет эффекта при привязке текста к заданному пути **`path`** посредством тега **`textPath`**.
+    В приведённом ниже примере тег **`path`** использовался только лишь для отрисовки линий и с расположением текста никак не связан.
+
+## Пример
+
+```html
+
+
+    
+    текст в якорях
+
+
+
+
+ + + - <!-- Якоря в действии --> - <text text-anchor="start" x="50" y="20">some start</text> - <text text-anchor="start" x="50" y="35">start</text> + + some start + start - <text text-anchor="middle" x="50" y="55">some middle</text> - <text text-anchor="middle" x="50" y="70">middle</text> + some middle + middle - <text text-anchor="end" x="50" y="85">some end</text> - <text text-anchor="end" x="50" y="100">end</text> - </svg> - </div> -</div> -</body> -</html>
+ some end + end + +
+
+ + +``` -

Песочницы

+**Песочницы** -

{{ EmbedLiveSample('Пример','400','400') }}

+{{ EmbedLiveSample('Пример','400','400') }} +## Элементы +Следующие элементы могут использовать `text-anchor` атрибут -

Элементы

+- [Text content elements](/en/SVG/Element#Text_content_elements "en/SVG/Element#TextContent") » -

Следующие элементы могут использовать text-anchor атрибут

+## Совместимость браузера - - -

Совместимость браузера

- - - -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/attribute/text-rendering/index.md b/files/ru/web/svg/attribute/text-rendering/index.md index 0ab4b079eafdc4..298f42c7b11e5f 100644 --- a/files/ru/web/svg/attribute/text-rendering/index.md +++ b/files/ru/web/svg/attribute/text-rendering/index.md @@ -3,85 +3,75 @@ title: text-rendering slug: Web/SVG/Attribute/text-rendering translation_of: Web/SVG/Attribute/text-rendering --- -

« SVG Attribute reference home

-

При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. text-rendering предоставляет возможность указывать данные рекомендации.

-

Помимо presentation attribute, настройки ренедеринга шрифтов можно задать через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.

-

Usage context

- - - - - - - - - - - - - - - - - - - -
КатегорияPresentation attribute
Значениеauto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
-
-
- auto
-
- Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.
-
- optimizeSpeed
-
- Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.
-
- optimizeLegibility
-
- Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.
-
- geometricPrecision
-
- Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.
-
-

Пример

-
<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"
+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute")
+
+При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. `text-rendering` предоставляет возможность указывать данные рекомендации.
+
+Помимо presentation attribute, настройки ренедеринга шрифтов можно задать через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.
+
+## Usage context
+
+| Категория          | Presentation attribute                                                                |
+| ------------------ | ------------------------------------------------------------------------------------- |
+| Значение           | **auto** \| optimizeSpeed \| optimizeLegibility \| geometricPrecision \| inherit      |
+| Animatable         | Yes                                                                                   |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty) |
+
+- auto
+  - : Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.
+- optimizeSpeed
+  - : Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.
+- optimizeLegibility
+  - : Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.
+- geometricPrecision
+  - : Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.
+
+## Пример
+
+```xml
+
+
+  
+  
-

optimizeLegibility (первая) и geometricPrecision (вторая)
-
-

-

Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}

-
<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"
-   version="1.1" width="660" height="40">
-  <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
-  <style>
+  
+  
+    The quick brown fox jumps over the lazy dog.
+  
+
+```
+
+**optimizeLegibility (первая) и geometricPrecision (вторая)**
+![](http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg)
+![](http://download.g63.ru/svg/text-rendering-geometricPrecision.svg)
+
+Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}
+
+```xml
+
+
+  
+  
-

Elements

-

The following elements can use the text-rendering attribute

-
    -
  • {{ SVGElement("text") }}
  • -
-

See also

-
    -
  • {{ cssxref("text-rendering","CSS text-rendering") }}
  • -
+ + + The quick brown fox jumps over the lazy dog. + + +``` + +## Elements + +The following elements can use the `text-rendering` attribute + +- {{ SVGElement("text") }} + +## See also + +- {{ cssxref("text-rendering","CSS text-rendering") }} diff --git a/files/ru/web/svg/attribute/transform/index.md b/files/ru/web/svg/attribute/transform/index.md index 2bd0766d9888c2..b0e0a7d73293e1 100644 --- a/files/ru/web/svg/attribute/transform/index.md +++ b/files/ru/web/svg/attribute/transform/index.md @@ -6,116 +6,122 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/transform --- -

« Справочник SVG атрибутов

- -

В атрибуте transform перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.

- -

Контекст использования

- - - - - - - - - - - - - - - - - - - - -
КатегорииНет
Значение<transform-list>
АнимацияДа
Нормативная базаSVG 1.1 (2nd Edition)
- -

Типы преобразований

- -
-
matrix(<a> <b> <c> <d> <e> <f>)
-
Преобразование с использованием матрицы из шести элементов. Преобразование matrix(a,b,c,d,e,f) равнозначно применению матрицы (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}, которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: (xпред.yпред.1)=(acebdf001)(xнов.yнов.1)=(axнов.+cyнов.+ebxнов.+dyнов.+f1) \begin{pmatrix} x_{\mathrm{пред.}} \\ y_{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{нов.}} \\ y_{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{нов.}} + c y_{\mathrm{нов.}} + e \\ b x_{\mathrm{нов.}} + d y_{\mathrm{нов.}} + f \\ 1 \end{pmatrix}
-
translate(<x> [<y>])
-
Перенос по осям x и y. Равнозначно matrix(1 0 0 1 x y). Если значение y опущено, оно принимается равным нулю.
-
scale(<x> [<y>])
-
Масштабирование по осям x и y. Равнозначно matrix(x 0 0 y 0 0). Если значение y опущено, оно принимается равным x.
-
rotate(<a> [<x> <y>])
-
Поворот на a градусов вокруг указанной точки. Если необязательные параметры x и y опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице (cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix} Если необязательные параметры x и y присутствуют, поворот будет осуществляться вокруг точки (x, y). Операция равнозначна следующему списку преобразований: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
-
skewX(<a>)
-
Наклон относительно оси x на a градусов. Операция соответствует матрице (1tga0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
-
skewY(<a>)
-
Наклон относительно оси y на a градусов. Операция соответствует матрице (100tga10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
-
- -

Примеры

- -

Поворот и перенос SVG-элемента

- -

В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут transform. Первоначальный элемент до преобразования показан полупрозрачным.

- -

CSS (необязательный):

- -
text {
+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов")
+
+В атрибуте `transform` перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.
+
+## Контекст использования
+
+| Категории        | Нет                                                                              |
+| ---------------- | -------------------------------------------------------------------------------- |
+| Значение         | **\**                                                            |
+| Анимация         | Да                                                                               |
+| Нормативная база | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) |
+
+### Типы преобразований
+
+- matrix(\ \ \ \ \ \)
+
+  - : Преобразование с использованием матрицы из шести элементов. Преобразование `matrix(a,b,c,d,e,f)` равнозначно применению матрицы 
+
+    (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix},
+
+     которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: 
+
+    (xпред.yпред.1)=(acebdf001)(xнов.yнов.1)=(axнов.+cyнов.+ebxнов.+dyнов.+f1) \begin{pmatrix} x*{\mathrm{пред.}} \\ y*{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{нов.}} \\ y*{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{нов.}} + c y*{\mathrm{нов.}} + e \\ b x*{\mathrm{нов.}} + d y*{\mathrm{нов.}} + f \\ 1 \end{pmatrix}
+
+- translate(\ \[\])
+  - : Перенос по осям `x` и `y`. Равнозначно `matrix(1 0 0 1 x y)`. Если значение `y` опущено, оно принимается равным нулю.
+- scale(\ \[\])
+  - : Масштабирование по осям `x` и `y`. Равнозначно `matrix(x 0 0 y 0 0)`. Если значение `y` опущено, оно принимается равным `x`.
+- rotate(\ \[\ \])
+
+  - : Поворот на `a` градусов вокруг указанной точки. Если необязательные параметры `x` и `y` опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице 
+
+    (cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+     Если необязательные параметры `x` и `y` присутствуют, поворот будет осуществляться вокруг точки `(x, y)`. Операция равнозначна следующему списку преобразований: `translate(, ) rotate() translate(-, -)`.
+
+- skewX(\)
+
+  - : Наклон относительно оси `x` на `a` градусов. Операция соответствует матрице 
+
+    (1tga0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+- skewY(\)
+
+  - : Наклон относительно оси `y` на `a` градусов. Операция соответствует матрице 
+
+    (100tga10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+## Примеры
+
+### Поворот и перенос SVG-элемента
+
+В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут `transform`. Первоначальный элемент до преобразования показан полупрозрачным.
+
+CSS (необязательный):
+
+```css
+text {
   font: 1em sans-serif;
-}
+} +``` -

SVG:

+SVG: -
<svg width="180" height="200"
+```html
+
 
-  <!-- Это элемент до применения переноса и поворота -->
-  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
+  
+  
 
-  <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента -->
-  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
-  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
+  
+  
+   Hello Moz! 
 
-</svg>
-
+ +``` -

{{EmbedLiveSample("Поворот_и_перенос_SVG-элемента",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

+{{EmbedLiveSample("Поворот_и_перенос_SVG-элемента",200,200,"/files/5217/rotate_and_translate_svg.png.png")}} -

Общее преобразование

+### Общее преобразование -

Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования matrix(1,2,3,4,5,6) и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.

+Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования `matrix(1,2,3,4,5,6)` и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат. -
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <g transform="matrix(1,2,3,4,5,6)">
-    <!-- Новая система координат (жирная синяя линия)
+  
+    
+    
+  
 
-  <!-- Предыдущая система координат (тонкая белая линия)
+  
+  
 
-</svg>
-
+ +``` -

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

+{{ EmbedLiveSample('General_Transformation','200px','250px') }} -

Элементы

+## Элементы -

Следующие элементы могут использовать атрибут transform:

+Следующие элементы могут использовать атрибут `transform`: -
+- {{ SVGElement("a") }} +- {{ SVGElement("clipPath") }} +- {{ SVGElement("defs") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("g") }} +- {{ SVGElement("switch") }} +- {{ SVGElement("use") }} +- [Графические элементы](/en/SVG/Element#Graphics "en/SVG/Element#Graphics") » diff --git a/files/ru/web/svg/attribute/values/index.md b/files/ru/web/svg/attribute/values/index.md index 26dc7e23feb8e0..c82366ccefd2ec 100644 --- a/files/ru/web/svg/attribute/values/index.md +++ b/files/ru/web/svg/attribute/values/index.md @@ -3,84 +3,48 @@ title: values slug: Web/SVG/Attribute/values translation_of: Web/SVG/Attribute/values --- -

« SVG Attribute reference home

+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") -

Атрибут values имеет два значения в зависимости от используемого контекста.

+Атрибут `values` имеет два значения в зависимости от используемого контекста. -

Для элементов анимации атрибут values представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список values, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.

+Для элементов анимации атрибут `values` представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список `values`, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются. -

Для элемента {{ SVGElement("feColorMatrix") }} содержимое values зависит от значения атрибута {{ SVGAttr("type") }}:

+Для элемента {{ SVGElement("feColorMatrix") }} содержимое `values` зависит от значения атрибута {{ SVGAttr("type") }}: -
    -
  • Для type="matrix", values — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой.
  • -
  • Для type="saturate", values — это единственное вещественное число (от 0 до 1).
  • -
  • Для type="hueRotate", values — это одно вещественное число (градусов).
  • -
  • Для type="luminanceToAlpha", values не применимы.
  • -
+- Для `type="matrix"`, `values` — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой. +- Для `type="saturate"`, `values` — это единственное вещественное число (от 0 до 1). +- Для `type="hueRotate"`, `values` — это одно вещественное число (градусов). +- Для `type="luminanceToAlpha"`, `values` не применимы. -

Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}.

+Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}. -
    -
  • Если type="matrix", этот атрибут по умолчанию присваивается матрице идентификаторов.
  • -
  • Если type="saturate", то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов.
    - Если type="hueRotate", то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов.
  • -
+- Если `type="matrix"`, этот атрибут по умолчанию присваивается матрице идентификаторов. +- Если `type="saturate"`, то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов. + Если `type="hueRotate"`, то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов. -

Usage context

+## Usage context -

For animation elements

+### For animation elements - - - - - - - - - - - - - - - - - - - -
CategoriesAnimation value attribute
Value<list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+| Categories | Animation value attribute | +| ------------------ | -------------------------------------------------------------------------------- | +| Value | \ | +| Animatable | No | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute) | -

For the {{ SVGElement("feColorMatrix") }} element

+### For the {{ SVGElement("feColorMatrix") }} element - - - - - - - - - - - - - - - - - - - -
CategoriesNone
Value<list> | <number>
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+| Categories | _None_ | +| ------------------ | --------------------------------------------------------------------------------------------- | +| Value | \ \| [\](/en/SVG/Content_type#Number "en/SVG/Content_type#Paint") | +| Animatable | Yes | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute) | -

Example

+## Example -

Elements

+## Elements -

The following elements can use the values attribute

+The following elements can use the `values` attribute - +- [Animation elements](/en/SVG/Element#Animation "en/SVG/Element#Animation") » +- {{ SVGElement("feColorMatrix") }} diff --git a/files/ru/web/svg/attribute/viewbox/index.md b/files/ru/web/svg/attribute/viewbox/index.md index 5a6aec2fb11732..fc2e46c6b3b44f 100644 --- a/files/ru/web/svg/attribute/viewbox/index.md +++ b/files/ru/web/svg/attribute/viewbox/index.md @@ -5,187 +5,124 @@ tags: - SVG translation_of: Web/SVG/Attribute/viewBox --- -

« SVG Attribute reference home

+« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") -

Аттрибут viewBox определяет расположение и размеры окна отображения SVG.

+`Аттрибут viewBox` определяет расположение и размеры окна отображения SVG. -

Значение атрибута viewBox — это набор четырёх чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).

+Значение атрибута `viewBox` — это набор четырёх чисел: `min-x`, `min-y`, `width` и `height`, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не [браузера](/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport)). -
-
html, body, svg {
+```
+html, body, svg {
   height:100%
 }
 
 svg:not(:root) {
   display: inline-block;
-}
+} +``` -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!--
+```html
+
+  
+  
 
-  <!--
+  
+  
+
 
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
-  <!-- Также не зависит от viewBox, как и в предыдущем примере -->
-  <rect x="0" y="0" width="100%" height="100%"/>
+
+  
+  
 
-  <!--
+  
+  
+
 
-<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
-  <!--
+
+  
+  
 
-  <!--
+  
+  
+
+```
+
+{{EmbedLiveSample('topExample', '100%', 200)}}
+
+На отображение с `viewBox` также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.
+
+> **Примечание:** **Обратите внимание:** при значениях `width` и `height` меньших или равных `0` элемент не отображается
+
+Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.
+
+## marker
+
+Для элемента {{SVGElement('marker')}}, `viewBox` определяет расположение и размеры содержимого элемента ``.
+
+| Значение              | **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)** |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение по умолчанию | _нет_                                                                                                                                                                                                             |
+| Анимируемое           | Да                                                                                                                                                                                                                |
+
+## pattern
+
+Для элемента {{SVGElement('pattern')}}, `viewBox` определяет расположение и размеры содержимого шаблона.
+
+| Значение              | **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)** |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение по умолчанию | _нет_                                                                                                                                                                                                             |
+| Анимируемое           | Да                                                                                                                                                                                                                |
+
+## svg
+
+Для элемента {{SVGElement('svg')}}, `viewBox` определяет расположение и размеры содержимого элемента ``.
+
+| Значение              | **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)** |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение по умолчанию | _нет_                                                                                                                                                                                                             |
+| Анимируемое           | Да                                                                                                                                                                                                                |
+
+## symbol
+
+Для элемента {{SVGElement('symbol')}}, `viewBox` определяет расположение и размеры содержимого элемента ``.
+
+| Значение              | **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)** |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение по умолчанию | _нет_                                                                                                                                                                                                             |
+| Анимируемое           | Да                                                                                                                                                                                                                |
+
+## view
+
+Для элемента {{SVGElement('view')}}, `viewBox` определяет расположение и размеры содержимого элемента ``.
+
+| Значение              | **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)**?, **[\](/docs/Web/SVG/Content_type#Number)** |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Значение по умолчанию | _нет_                                                                                                                                                                                                             |
+| Анимируемое           | Да                                                                                                                                                                                                                |
+
+## Смотрите также
+
+- [SVG Getting Started: Positions](/en/SVG/Tutorial/Positions "https://developer.mozilla.org/en/SVG/Tutorial/Positions")
diff --git a/files/ru/web/svg/attribute/width/index.md b/files/ru/web/svg/attribute/width/index.md
index ae3b8d2dbc776f..5c96140461598c 100644
--- a/files/ru/web/svg/attribute/width/index.md
+++ b/files/ru/web/svg/attribute/width/index.md
@@ -5,658 +5,279 @@ tags:
   - ширина
 translation_of: Web/SVG/Attribute/width
 ---
-
{{SVGRef}}
- -

Атрибут width определяет горизонтальный размер элементов в пользовательской системе координат.

- -

Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}}

- -
- - -
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
-  <!-- С шириной равной 0 или меньше, ничего не будет отображаться -->
-  <rect x="0" y="0" width="0" height="90"/>
-  <rect x="0" y="100" width="60" height="90"/>
-  <rect x="0" y="200" width="100%" height="90"/>
-</svg>
- -

{{EmbedLiveSample('topExample', '100%', 200)}}

-
- -

feBlend

- -

Для {{SVGElement('feBlend')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feColorMatrix

- -

Для {{SVGElement('feColorMatrix')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feComponentTransfer

- -

Для {{SVGElement('feComponentTransfer')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feComposite

- -

Для {{SVGElement('feComposite')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feConvolveMatrix

- -

Для {{SVGElement('feConvolveMatrix')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feDiffuseLighting

- -

Для {{SVGElement('feDiffuseLighting')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feDisplacementMap

- -

Для {{SVGElement('feDisplacementMap')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feDropShadow

- -

Для {{SVGElement('feDropShadow')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feFlood

- -

Для {{SVGElement('feFlood')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feGaussianBlur

- -

Для {{SVGElement('feGaussianBlur')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feImage

- -

Для {{SVGElement('feImage')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feMerge

- -

Для {{SVGElement('feMerge')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feMorphology

- -

Для {{SVGElement('feMorphology')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feOffset

- -

Для {{SVGElement('feOffset')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feSpecularLighting

- -

Для {{SVGElement('feSpecularLighting')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feTile

- -

Для {{SVGElement('feTile')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

feTurbulence

- -

Для {{SVGElement('feTurbulence')}}, width определяет горизонтальный размер для отображения области примитивов.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
- -

filter

- -

Для {{SVGElement('filter')}}, width определяет горизонтальный размер для отображения области фильтров.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию120%
AnimatableДа
- -

foreignObject

- -

Для {{SVGElement('foreignObject')}}, width определяет горизонтальный размер для отображения области ссылочных документов.

- - - - - - - - - - - - - - - - -
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 0)
AnimatableДа
- -

Примечание: Начиная с SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <foreignObject>.

- -

image

- -

Для {{SVGElement('image')}}, width определяет горизонтальный размер для изображения.

- - - - - - - - - - - - - - - - -
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как ширина изображения)
AnimatableДа
- -

Примечание: Начиная с SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для изображений.

- -

mask

- -

Для {{SVGElement('mask')}}, width определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}.

- - - - - - - - - - - - - - - - -
Значение<length> | <percentage>
По умолчанию120%
AnimatableДа
- -

pattern

- -

Для {{SVGElement('pattern')}}, width определяет горизонтальный размер мостящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.

- - - - - - - - - - - - - - - - -
Значение<length>
По умолчанию0
AnimatableДа
- -

rect

- -

Для {{SVGElement('rect')}}, width определяет горизонтальный размер прямоугольника.

- - - - - - - - - - - - - - - - -
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 0)
AnimatableДа
- -

Примечание: Начиная с SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для прямоугольника.

- -

svg

- -

Для {{SVGElement('svg')}}, width определяет горизонтальный размер отображаемой области вьюпорта SVG.

- -

Примечание: В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и width опущены, svg-элемент будет отображаться с шириной 300px

- - - - - - - - - - - - - - - - -
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 100%)
AnimatableДа
- -

Примечание: Начиная с SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <svg>.

- -

use

- -

Для {{SVGElement('use')}}, width определяет горизонтальный размер для ссылочного элемента.

- - - - - - - - - - - - - - - - -
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 0)
AnimatableДа
- -

Примечание: Начиная с SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использованных элементов.

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Filters 1.0', '#element-attrdef-filter-width', 'width') }} - {{Spec2('Filters 1.0')}}Definition for <filter>
{{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }} - {{Spec2('Filters 1.0')}}Definition for filter primitives
{{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}} - {{Spec2("CSS Masks")}}Definition for <mask>
{{SpecName("SVG2", "geometry.html#Sizing", "width")}} - {{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}} - {{Spec2("SVG2")}}Definition for <pattern>
{{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <foreignObject>
{{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <pattern>
{{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <image>
{{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <svg>
{{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <use>
{{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <filter>
{{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for filter primitives
{{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <mask>
{{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}} - {{Spec2("SVG1.1")}}Initial definition for <rect>
+{{SVGRef}} + +Атрибут **`width`** определяет горизонтальный размер элементов в пользовательской системе координат. + +Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}} + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + +``` + +{{EmbedLiveSample('topExample', '100%', 200)}} + +## feBlend + +Для {{SVGElement('feBlend')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feColorMatrix + +Для {{SVGElement('feColorMatrix')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feComponentTransfer + +Для {{SVGElement('feComponentTransfer')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feComposite + +Для {{SVGElement('feComposite')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feConvolveMatrix + +Для {{SVGElement('feConvolveMatrix')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feDiffuseLighting + +Для {{SVGElement('feDiffuseLighting')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feDisplacementMap + +Для {{SVGElement('feDisplacementMap')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feDropShadow + +Для {{SVGElement('feDropShadow')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feFlood + +Для {{SVGElement('feFlood')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feGaussianBlur + +Для {{SVGElement('feGaussianBlur')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feImage + +Для {{SVGElement('feImage')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feMerge + +Для {{SVGElement('feMerge')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feMorphology + +Для {{SVGElement('feMorphology')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feOffset + +Для {{SVGElement('feOffset')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feSpecularLighting + +Для {{SVGElement('feSpecularLighting')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feTile + +Для {{SVGElement('feTile')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## feTurbulence + +Для {{SVGElement('feTurbulence')}}, `width` определяет горизонтальный размер для отображения области примитивов. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `100%` | +| Animatable | Да | + +## filter + +Для {{SVGElement('filter')}}, `width` определяет горизонтальный размер для отображения области фильтров. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `120%` | +| Animatable | Да | + +## foreignObject + +Для {{SVGElement('foreignObject')}}, `width` определяет горизонтальный размер для отображения области ссылочных документов. + +| Значение | `auto` \| **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | -------------------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `auto` (рассматривается как `0`) | +| Animatable | Да | + +> **Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для ``. + +## image + +Для {{SVGElement('image')}}, `width` определяет горизонтальный размер для изображения. + +| Значение | `auto` \| **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | -------------------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `auto` (рассматривается как ширина изображения) | +| Animatable | Да | + +> **Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для изображений. + +## mask + +Для {{SVGElement('mask')}}, `width` определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | ---------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `120%` | +| Animatable | Да | + +## pattern + +Для {{SVGElement('pattern')}}, `width` определяет горизонтальный размер мостящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}. + +| Значение | **[\](/docs/Web/SVG/Content_type#Length)** | +| ------------ | -------------------------------------------------- | +| По умолчанию | `0` | +| Animatable | Да | + +## rect + +Для {{SVGElement('rect')}}, `width` определяет горизонтальный размер прямоугольника. + +| Значение | `auto` \| **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | -------------------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `auto` (рассматривается как `0`) | +| Animatable | Да | + +> **Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для прямоугольника. + +## svg + +Для {{SVGElement('svg')}}, `width` определяет горизонтальный размер отображаемой области вьюпорта SVG. + +> **Примечание:** В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и `width` опущены, [svg-элемент будет отображаться с шириной `300px`](https://svgwg.org/specs/integration/#svg-css-sizing) + +| Значение | `auto` \| **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | -------------------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `auto` (рассматривается как `100%`) | +| Animatable | Да | + +> **Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для ``. + +## use + +Для {{SVGElement('use')}}, `width` определяет горизонтальный размер для ссылочного элемента. + +| Значение | `auto` \| **[\](/docs/Web/SVG/Content_type#Length)** \| **[\](/docs/Web/SVG/Content_type#Percentage)** | +| ------------ | -------------------------------------------------------------------------------------------------------------------------- | +| По умолчанию | `auto` (рассматривается как `0`) | +| Animatable | Да | + +> **Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использованных элементов. + +## Спецификации + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------- | +| {{ SpecName('Filters 1.0', '#element-attrdef-filter-width', 'width') }} | {{Spec2('Filters 1.0')}} | Definition for `` | +| {{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }} | {{Spec2('Filters 1.0')}} | Definition for filter primitives | +| {{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}} | {{Spec2("CSS Masks")}} | Definition for `` | +| {{SpecName("SVG2", "geometry.html#Sizing", "width")}} | {{Spec2("SVG2")}} | Definition as a geometry property | +| {{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}} | {{Spec2("SVG2")}} | Definition for `` | +| {{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for filter primitives | +| {{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | +| {{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}} | {{Spec2("SVG1.1")}} | Initial definition for `` | diff --git a/files/ru/web/svg/attribute/x/index.md b/files/ru/web/svg/attribute/x/index.md index 09d0d9626bd8d9..ec03647e52a69a 100644 --- a/files/ru/web/svg/attribute/x/index.md +++ b/files/ru/web/svg/attribute/x/index.md @@ -6,81 +6,51 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/x --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Этот атрибут указывает координату оси x в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для <length>.

+Этот атрибут указывает координату оси **`x`** в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для [**``**.](https://www.w3.org/TR/SVG11/types.html#DataTypeLength) -

Если атрибут x явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы 0, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно -10%.

+Если атрибут **`x`** явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы **0**, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно **-10%**. -

Контекст использования

+## Контекст использования - - - - - - - - - - - - - - - - - - - -
КатегорииNone
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): altGlyph element
- SVG 1.1 (2nd Edition): cursor element
- SVG 1.1 (2nd Edition): fePointLight element
- SVG 1.1 (2nd Edition): feSpotLight element
- SVG 1.1 (2nd Edition): filter element
- SVG 1.1 (2nd Edition): foreignObject element
- SVG 1.1 (2nd Edition): glyphRef element
- SVG 1.1 (2nd Edition): image element
- SVG 1.1 (2nd Edition): pattern element
- SVG 1.1 (2nd Edition): rect element
- SVG 1.1 (2nd Edition): svg element
- SVG 1.1 (2nd Edition): text element
- SVG 1.1 (2nd Edition): use element
- SVG 1.1 (2nd Edition): Filter primitive
- SVG 1.1 (2nd Edition): mask element
- SVG 1.1 (2nd Edition): tspan element
+| Категории | None | +| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | [\](/ru/SVG/Content_type#Coordinate "https://developer.mozilla.org/ru/SVG/Content_type#Coordinate") | +| Анимируемый | Да | +| Нормативные документы (en) | [SVG 1.1 (2nd Edition): altGlyph element](http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute) [SVG 1.1 (2nd Edition): cursor element](http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute) [SVG 1.1 (2nd Edition): fePointLight element](http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute) [SVG 1.1 (2nd Edition): feSpotLight element](http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute) [SVG 1.1 (2nd Edition): filter element](http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute) [SVG 1.1 (2nd Edition): foreignObject element](http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute) [SVG 1.1 (2nd Edition): glyphRef element](http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute) [SVG 1.1 (2nd Edition): image element](http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute) [SVG 1.1 (2nd Edition): pattern element](http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute) [SVG 1.1 (2nd Edition): rect element](http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute) [SVG 1.1 (2nd Edition): svg element](http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute) [SVG 1.1 (2nd Edition): text element](http://www.w3.org/TR/SVG/text.html#TextElementXAttribute) [SVG 1.1 (2nd Edition): use element](http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute) [SVG 1.1 (2nd Edition): Filter primitive](http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute) [SVG 1.1 (2nd Edition): mask element](http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute) [SVG 1.1 (2nd Edition): tspan element](http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute) | -

{{page("/ru/SVG/Content_type","coordinate")}}

+{{page("/ru/SVG/Content_type","coordinate")}} -

Пример

+## Пример -
<?xml version="1.0"?>
-<svg width="120" height="120"
+```xml
+
+
-
-

Элементы

- -

Следующие элементы могут использовать атрибут x.

- -
    -
  • Filter primitive elements »
  • -
  • {{SVGElement("altGlyph")}}
  • -
  • {{SVGElement("fePointLight")}}
  • -
  • {{SVGElement("feSpotLight")}}
  • -
  • {{SVGElement("filter")}}
  • -
  • {{SVGElement("foreignObject")}}
  • -
  • {{SVGElement("glyphRef")}}
  • -
  • {{SVGElement("image")}}
  • -
  • {{SVGElement("pattern")}}
  • -
  • {{SVGElement("rect")}}
  • -
  • {{SVGElement("svg")}}
  • -
  • {{SVGElement("text")}}
  • -
  • {{SVGElement("use")}}
  • -
  • {{SVGElement("mask")}}
  • -
  • {{SVGElement("tref")}}
  • -
  • {{SVGElement("tspan")}}
  • -
+ xmlns="http://www.w3.org/2000/svg"> + + + +``` + +## Элементы + +Следующие элементы могут использовать атрибут `x`. + +- `Filter primitive elements »` +- `{{SVGElement("altGlyph")}}` +- `{{SVGElement("fePointLight")}}` +- `{{SVGElement("feSpotLight")}}` +- `{{SVGElement("filter")}}` +- `{{SVGElement("foreignObject")}}` +- `{{SVGElement("glyphRef")}}` +- `{{SVGElement("image")}}` +- `{{SVGElement("pattern")}}` +- `{{SVGElement("rect")}}` +- `{{SVGElement("svg")}}` +- `{{SVGElement("text")}}` +- `{{SVGElement("use")}}` +- `{{SVGElement("mask")}}` +- `{{SVGElement("tref")}}` +- `{{SVGElement("tspan")}}` diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.md b/files/ru/web/svg/attribute/xml_colon_space/index.md index 8fa0c9d0b40262..07f50bc99b69fc 100644 --- a/files/ru/web/svg/attribute/xml_colon_space/index.md +++ b/files/ru/web/svg/attribute/xml_colon_space/index.md @@ -1,50 +1,31 @@ --- -title: 'xml:space' -slug: 'Web/SVG/Attribute/xml:space' -translation_of: 'Web/SVG/Attribute/xml:space' +title: xml:space +slug: Web/SVG/Attribute/xml:space +translation_of: Web/SVG/Attribute/xml:space --- -
{{deprecated_header("SVG2")}}
- -

« SVG Attribute reference home

- -

SVG supports the standard XML attribute xml:space to specify the handling of white space characters within a given {{ SVGElement("text") }} element's character data. Note that any child element of a {{ SVGElement("text") }} element may also have an xml:space attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect.

- -
-

Note: Instead of using the xml:space attribute you should use the {{cssxref("white-space")}} CSS property.

-
- -

Usage context

- - - - - - - - - - - - - - - - - - - - -
CategoriesNone
Valuedefault | preserve
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
- -
-
default
-
Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.
-
preserve
-
Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с xml:space="preserve", строка "a b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").
-
- -

Examples

- -

Elements

- -

All the SVG elements can use the xml:space attribute

+{{deprecated_header("SVG2")}} + +« [SVG Attribute reference home](/en/SVG/Attribute "en/SVG/Attribute") + +SVG supports the standard XML attribute `xml:space` to specify the handling of white space characters within a given {{ SVGElement("text") }} element's character data. Note that any child element of a {{ SVGElement("text") }} element may also have an `xml:space` attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect. + +> **Примечание:** Instead of using the `xml:space` attribute you should use the {{cssxref("white-space")}} CSS property. + +## Usage context + +| Categories | _None_ | +| ------------------ | ------------------------------------------------------------------------ | +| Value | **`default`** \| `preserve` | +| Animatable | No | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#WhiteSpace) | + +- default + - : Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены. +- preserve + - : Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с `xml:space="preserve"`, строка "a b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b"). + +## Examples + +## Elements + +All the SVG elements can use the `xml:space` attribute diff --git a/files/ru/web/svg/attribute/y/index.md b/files/ru/web/svg/attribute/y/index.md index f00fdf34867e92..8de433424140a8 100644 --- a/files/ru/web/svg/attribute/y/index.md +++ b/files/ru/web/svg/attribute/y/index.md @@ -6,81 +6,51 @@ tags: - SVG атрибуты translation_of: Web/SVG/Attribute/y --- -

« Справочник SVG атрибутов

+« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "Справочник SVG атрибутов") -

Атрибут y указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента).

+Атрибут **`y`** указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). -

Если атрибут явно не указан, его значение по умолчанию равняется 0, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется -10% .

+Если атрибут явно не указан, его значение по умолчанию равняется **0**, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется **-10%** . -

Использование

+## Использование - - - - - - - - - - - - - - - - - - - -
КатегорииNone
Значение<coordinate>
АнимацияВозможно
Нормативные документы (en)SVG 1.1 (2nd Edition): altGlyph element
- SVG 1.1 (2nd Edition): cursor element
- SVG 1.1 (2nd Edition): fePointLight element
- SVG 1.1 (2nd Edition): feSpotLight element
- SVG 1.1 (2nd Edition): filter element
- SVG 1.1 (2nd Edition): foreignObject element
- SVG 1.1 (2nd Edition): glyphRef element
- SVG 1.1 (2nd Edition): image element
- SVG 1.1 (2nd Edition): pattern element
- SVG 1.1 (2nd Edition): rect element
- SVG 1.1 (2nd Edition): svg element
- SVG 1.1 (2nd Edition): text element
- SVG 1.1 (2nd Edition): use element
- SVG 1.1 (2nd Edition): Filter primitive
- SVG 1.1 (2nd Edition): mask element
- SVG 1.1 (2nd Edition): tspan element
+| Категории | None | +| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Значение | [\](/ru/SVG/Content_type#Coordinate) | +| Анимация | Возможно | +| Нормативные документы (en) | [SVG 1.1 (2nd Edition): altGlyph element](http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute) [SVG 1.1 (2nd Edition): cursor element](http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute) [SVG 1.1 (2nd Edition): fePointLight element](http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute) [SVG 1.1 (2nd Edition): feSpotLight element](http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute) [SVG 1.1 (2nd Edition): filter element](http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute) [SVG 1.1 (2nd Edition): foreignObject element](http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute) [SVG 1.1 (2nd Edition): glyphRef element](http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute) [SVG 1.1 (2nd Edition): image element](http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute) [SVG 1.1 (2nd Edition): pattern element](http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute) [SVG 1.1 (2nd Edition): rect element](http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute) [SVG 1.1 (2nd Edition): svg element](http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute) [SVG 1.1 (2nd Edition): text element](http://www.w3.org/TR/SVG/text.html#TextElementYAttribute) [SVG 1.1 (2nd Edition): use element](http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute) [SVG 1.1 (2nd Edition): Filter primitive](http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute) [SVG 1.1 (2nd Edition): mask element](http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute) [SVG 1.1 (2nd Edition): tspan element](http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute) | -

{{page("/ru/SVG/Content_type","coordinate")}}

+{{page("/ru/SVG/Content_type","coordinate")}} -

Пример

+## Пример -
<?xml version="1.0"?>
-<svg width="120" height="120"
+```xml
+
+
-
-

Элементы

- -

Следующие элементы могут использовать атрибут y.

- -
    -
  • Filter primitive elements »
  • -
  • {{SVGElement("altGlyph")}}
  • -
  • {{SVGElement("fePointLight")}}
  • -
  • {{SVGElement("feSpotLight")}}
  • -
  • {{SVGElement("filter")}}
  • -
  • {{SVGElement("foreignObject")}}
  • -
  • {{SVGElement("glyphRef")}}
  • -
  • {{SVGElement("image")}}
  • -
  • {{SVGElement("pattern")}}
  • -
  • {{SVGElement("rect")}}
  • -
  • {{SVGElement("svg")}}
  • -
  • {{SVGElement("text")}}
  • -
  • {{SVGElement("use")}}
  • -
  • {{SVGElement("mask")}}
  • -
  • {{SVGElement("tref")}}
  • -
  • {{SVGElement("tspan")}}
  • -
+ xmlns="http://www.w3.org/2000/svg"> + + + +``` + +## Элементы + +Следующие элементы могут использовать атрибут `y`. + +- [Filter primitive elements](/ru/SVG/Element#FilterPrimitive) » +- {{SVGElement("altGlyph")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("filter")}} +- {{SVGElement("foreignObject")}} +- {{SVGElement("glyphRef")}} +- {{SVGElement("image")}} +- {{SVGElement("pattern")}} +- {{SVGElement("rect")}} +- {{SVGElement("svg")}} +- {{SVGElement("text")}} +- {{SVGElement("use")}} +- {{SVGElement("mask")}} +- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} diff --git a/files/ru/web/svg/element/a/index.md b/files/ru/web/svg/element/a/index.md index 0343391d3982a6..d5fe26906045e7 100644 --- a/files/ru/web/svg/element/a/index.md +++ b/files/ru/web/svg/element/a/index.md @@ -6,37 +6,39 @@ tags: translation_of: Web/SVG/Element/a original_slug: Web/SVG/Элемент/a --- -
{{SVGRef}}
+{{SVGRef}} -

SVG элемент <a> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.

+SVG элемент **\** создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}. -

Элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.

+Элемент `
` является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру. -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Ссылка в фигуре -->
-  <a href="/docs/Web/SVG/Element/circle">
-    <circle cx="50" cy="40" r="35"/>
-  </a>
-
-  <!-- Ссылка в тексте -->
-  <a href="/docs/Web/SVG/Element/text">
-    <text x="50" y="90" text-anchor="middle">
-      &lt;circle&gt;
-    </text>
-  </a>
-</svg>
- -
/* Так как SVG не предоставляет визуальных стилей по умолчанию для ссылок,
+```css hidden
+@namespace svg url(http://www.w3.org/2000/svg);
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
+    
+  
+
+  
+  
+    
+      <circle>
+    
+  
+
+```
+
+```js
+/* Так как SVG не предоставляет визуальных стилей по умолчанию для ссылок,
    будет лучше задать самостоятельно */
 
 @namespace svg url(http://www.w3.org/2000/svg);
-/* Необходимо выделить только SVG элементы <a>, но не HTML.
+/* Необходимо выделить только SVG элементы , но не HTML.
    Смотрите предупреждение ниже */
 
 svg|a:link, svg|a:visited {
@@ -51,78 +53,72 @@ text svg|a {
 
 svg|a:hover, svg|a:active {
   outline: dotted 1px blue;
-}
- -

{{EmbedLiveSample('Exemple', 100, 100)}}

- -
-

Поскольку этот элемент разделяет своё имя с элементом HTML <a>, выбор a через CSS или querySelector может выбрать не тот тип элемента. Попробуйте правило @namespace, чтобы разделять их.

-
-
- -

Атрибуты

- -
-
{{htmlattrxref("download", "a")}} {{experimental_inline}}
-
Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.
- Тип: <string> ;Значение по умолчанию: none;Анимируем: нет
-
{{SVGAttr("href")}}
-
{{Glossary("URL")}} или фрагмент URL для перехода.
- Тип: <URL> ; Значение по умолчанию: none; Анимируем: да
-
{{htmlattrxref("hreflang", "a")}}
-
URL на человеческом языке или фрагмент URL для перехода.
- Тип: <string>; Значение по умолчанию: none; Анимируем: да
-
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
-
Разделённый пробелами список URL при переходе по которым браузер будет отправлять POST запросы с телом PING (в фоне). Обычно используется для трекинга.
- Тип: <list-of-URLs>; Значение по умолчанию: none; Анимируем: нет
-
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
-
Какой referrer отправить при получении {{Glossary("URL")}}.
- Тип: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Значение по умолчанию: none; Анимируем: нет
-
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
-
Отношение между целевым объектом и объектом link.
- Тип: <list-of-Link-Types> ; Значение по умолчанию: none; Анимируем: да
-
{{SVGAttr("target")}}
-
Где отобразить переход {{Glossary("URL")}}.
- Тип: _self|_parent|_top|_blank|<name> ; Значение по умолчанию: _self; Анимируем: да
-
{{htmlattrxref("type", "a")}}
-
{{Glossary("MIME type")}} для ссылки URL.
- Тип: <string> ; Значение по умолчанию: none; Анимируем: да
-
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
-
URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
- Тип: <URL> ; Значение по умолчанию: none; Анимируем: да
-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Document element event attributes, Graphical event attributes
-
Presentation Attributes
-
Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
XLink Attributes
-
Наиболее используемые: {{SVGAttr("xlink:title")}}
-
ARIA Attributes
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс SVGAElement.

- -

Примечания к использованию

- -

{{svginfo}}

- -

Спецификации

+} +``` + +{{EmbedLiveSample('Exemple', 100, 100)}} + +> **Предупреждение:** Поскольку этот элемент разделяет своё имя с [элементом HTML ``](/ru/docs/Web/HTML/Element/A), выбор `a` через CSS или [`querySelector`](/ru/docs/Web/API/Document/querySelector) может выбрать не тот тип элемента. Попробуйте [правило `@namespace`](/ru/docs/Web/CSS/@namespace), чтобы разделять их. + +## Атрибуты + +- {{htmlattrxref("download", "a")}} {{experimental_inline}} + - : Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально. + _Тип_: **\** ;_Значение по умолчанию_: _none_;_Анимируем_: **нет** +- {{SVGAttr("href")}} + - : {{Glossary("URL")}} или фрагмент URL для перехода. + _Тип_: **[\](/docs/Web/SVG/Content_type#URL)** ; _Значение по умолчанию_: _none_; _Анимируем_: **да** +- {{htmlattrxref("hreflang", "a")}} + - : URL на человеческом языке или фрагмент URL для перехода. + _Тип_: **\**; _Значение по умолчанию_: _none_; _Анимируем_: **да** +- {{htmlattrxref("ping", "a")}} {{experimental_inline}} + - : Разделённый пробелами список URL при переходе по которым браузер будет отправлять [`POST`](/ru/docs/Web/HTTP/Methods/POST) запросы с телом `PING` (в фоне). Обычно используется для трекинга. + _Тип_: **[\](/docs/Web/SVG/Content_type#List-of-Ts)**; _Значение по умолчанию_: _none_; _Анимируем_: **нет** +- {{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}} + - : Какой [referrer](/ru/docs/Web/HTTP/Заголовки/Referer) отправить при получении {{Glossary("URL")}}. + _Тип_: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; _Значение по умолчанию_: _none_; _Анимируем_: **нет** +- {{htmlattrxref("rel", "a")}} {{experimental_inline}} + - : Отношение между целевым объектом и объектом link. + _Тип_: **[\](/docs/Web/HTML/Link_types)** ; _Значение по умолчанию_: _none_; _Анимируем_: **да** +- {{SVGAttr("target")}} + - : Где отобразить переход {{Glossary("URL")}}. + _Тип_: `_self`|`_parent`|`_top`|`_blank`|**\** ; _Значение по умолчанию_: `_self`; _Анимируем_: **да** +- {{htmlattrxref("type", "a")}} + - : {{Glossary("MIME type")}} для ссылки URL. + _Тип_: **\** ; _Значение по умолчанию_: _none_; _Анимируем_: **да** +- {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}} + - : URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами. + _Тип_: **[\](/docs/Web/SVG/Content_type#URL)** ; _Значение по умолчанию_: _none_; _Анимируем_: **да** + +### Глобальные атрибуты + +- [Core Attributes](/docs/Web/SVG/Attribute/Core) + - : Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}} +- [Styling Attributes](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Conditional Processing Attributes](/docs/Web/SVG/Attribute/Conditional_Processing) + - : Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Event Attributes + - : [Global event attributes](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Document element event attributes](/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes), [Graphical event attributes](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation) + - : Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- XLink Attributes + - : Наиболее используемые: {{SVGAttr("xlink:title")}} +- ARIA Attributes + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Интерфейс DOM + +Этот элемент реализует интерфейс [`SVGAElement`](/ru/docs/DOM/SVGAElement "DOM/SVGAElement"). + +## Примечания к использованию + +{{svginfo}} + +## Спецификации {{Specifications}} -

Совместимость с браузерами

+## Совместимость с браузерами -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/element/animate/index.md b/files/ru/web/svg/element/animate/index.md index d5bbaebf535d03..222da2c2133616 100644 --- a/files/ru/web/svg/element/animate/index.md +++ b/files/ru/web/svg/element/animate/index.md @@ -9,55 +9,49 @@ tags: translation_of: Web/SVG/Element/animate original_slug: Web/SVG/Элемент/animate --- -
{{SVGRef}}
+{{SVGRef}} -

Тег <animate> может быть помещён внутри какой-то фигуры, например, <circle> . Он задаёт анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определённым интервалом.

+Тег \ может быть помещён внутри какой-то фигуры, например, \ . Он задаёт анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определённым интервалом. -

Использование

+## Использование -

{{svginfo}}

+{{svginfo}} -

Пример

+## Пример -

» animate.svg

+» [animate.svg](/files/3258/animate.svg) -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Conditional processing attributes](/ru/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/ru/docs/Web/SVG/Attribute#Core) » +- [Animation event attributes](/ru/docs/Web/SVG/Attribute#AnimationEvent) » +- [Xlink attributes](/ru/docs/Web/SVG/Attribute#XLink) » +- [Animation attribute target attributes](/ru/docs/Web/SVG/Attribute#AnimationAttributeTarget) » +- [Animation timing attributes](/ru/docs/Web/SVG/Attribute#AnimationTiming) » +- [Animation value attributes](/ru/docs/Web/SVG/Attribute#AnimationValue) » +- [Animation addition attributes](/ru/docs/Web/SVG/Attribute#AnimationAddition) » +- {{SVGAttr("externalResourcesRequired")}} -

Атрибуты элемента

+### Атрибуты элемента -
    -
  • {{SVGAttr("attributeName")}}
  • -
  • {{SVGAttr("attributeType")}}
  • -
  • {{SVGAttr("from")}}
  • -
  • {{SVGAttr("to")}}
  • -
  • {{SVGAttr("dur")}}
  • -
  • {{SVGAttr("repeatCount")}}
  • -
+- {{SVGAttr("attributeName")}} +- {{SVGAttr("attributeType")}} +- {{SVGAttr("from")}} +- {{SVGAttr("to")}} +- {{SVGAttr("dur")}} +- {{SVGAttr("repeatCount")}} -

DOM интерфейс

+## DOM интерфейс -

Элемент реализует SVGAnimateElement интерфейс .

+Элемент реализует [`SVGAnimateElement`](/en-US/docs/Web/DOM/SVGAnimateElement) интерфейс . -

Спецификации

+## Спецификации {{Specifications}} -

Поддерживаемые браузеры

+## Поддерживаемые браузеры -

{{Compat}}

- -

+{{Compat}} diff --git a/files/ru/web/svg/element/animatemotion/index.md b/files/ru/web/svg/element/animatemotion/index.md index c49616e8d88090..8a5f10e5d92117 100644 --- a/files/ru/web/svg/element/animatemotion/index.md +++ b/files/ru/web/svg/element/animatemotion/index.md @@ -8,103 +8,83 @@ tags: translation_of: Web/SVG/Element/animateMotion original_slug: Web/SVG/Элемент/animateMotion --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <animateMotion> вызывает перемещение ссылочного элемента вдоль пути движения.

+Элемент **``** вызывает перемещение ссылочного элемента вдоль пути движения. -

Контекст использования

+## Контекст использования -

{{svginfo}}

+{{svginfo}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Условные атрибуты обработки](/ru/docs/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Основные атрибуты](/ru/docs/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Атрибуты события анимации](/ru/docs/SVG/Attribute#Animation_event_attributes "en/SVG/Attribute#AnimationEvent") » +- [Атрибуты Xlink](/ru/docs/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- [Атрибуты времени анимации](/ru/docs/SVG/Attribute#Animation_timing_attributes "en/SVG/Attribute#AnimationTiming") » +- [Величина атрибутов анимации](/ru/docs/SVG/Attribute#Animation_value_attributes "en/SVG/Attribute#AnimationValue") » +- [Атрибуты добавления анимации](/ru/docs/SVG/Attribute#Animation_addition_attributes "en/SVG/Attribute#AnimationAddition") » +- {{SVGAttr("externalResourcesRequired")}} -

Собственные атрибуты

+### Собственные атрибуты -
    -
  • {{SVGAttr("calcMode")}}
  • -
  • {{SVGAttr("path")}}
  • -
  • {{SVGAttr("keyPoints")}}
  • -
  • {{SVGAttr("rotate")}}
  • -
  • {{SVGAttr("origin")}}
  • -
+- {{SVGAttr("calcMode")}} +- {{SVGAttr("path")}} +- {{SVGAttr("keyPoints")}} +- {{SVGAttr("rotate")}} +- {{SVGAttr("origin")}} -

DOM интерфейс

+## DOM интерфейс -

Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.

+Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}. -

Пример

+## Пример -

SVG

+### SVG -
<?xml version="1.0"?>
-<svg width="120" height="120" viewBox="0 0 120 120"
+```html
+
+
-
-

Результат

- -

{{EmbedLiveSample("Пример", 120, 120)}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Без изменений
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Совместимость с браузерами

-

{{Compat}}

- -

Смотрите также

- -
    -
  • {{SVGElement("mpath")}}
  • -
+ xmlns:xlink="http://www.w3.org/1999/xlink"> + + + + + + + + + + + + + + + +``` + +### Результат + +{{EmbedLiveSample("Пример", 120, 120)}} + +## Характеристики + +| Спецификация | Статус | Комментарий | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------- | +| {{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}} | {{Spec2("SVG Animations 2")}} | Без изменений | +| {{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}} | {{Spec2('SVG1.1')}} | Начальное определение | + +## Совместимость с браузерами + +{{Compat}} + +## Смотрите также + +- {{SVGElement("mpath")}} diff --git a/files/ru/web/svg/element/circle/index.md b/files/ru/web/svg/element/circle/index.md index 41938daa835bbd..734f074912cda5 100644 --- a/files/ru/web/svg/element/circle/index.md +++ b/files/ru/web/svg/element/circle/index.md @@ -7,80 +7,66 @@ tags: translation_of: Web/SVG/Element/circle original_slug: Web/SVG/Элемент/circle --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент circle — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.

+`Элемент circle` — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса. -

Информация

+## Информация -

{{svginfo}}

+{{svginfo}} -

Пример

+## Пример +```xml + + + + +``` +» [circle.svg](https://mdn.mozillademos.org/files/7707/circle2.svg) -
<?xml version="1.0"?>
-<svg viewBox="0 0 120 120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <circle cx="60" cy="60" r="50"/>
-</svg>
+## Атрибуты +### Унаследованные +- [Условные атрибуты](/en-US/SVG/Attribute#Conditional_processing_attributes) » +- [Ключевые атрибуты](/en-US/SVG/Attribute#Core_attributes) » +- [Атрибуты графических событий](/en-US/SVG/Attribute#Graphical_event_attributes) » +- [Атрибуты представления](/en-US/SVG/Attribute#Presentation_attributes) » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -

» circle.svg

+### Особые -

Атрибуты

+- {{ SVGAttr("cx") }} -

Унаследованные

+Координата центра окружности по оси x. - +- {{ SVGAttr("cy") }} -

Особые

+Координата центра окружности по оси y. -
    -
  • {{ SVGAttr("cx") }}
  • -
+- {{ SVGAttr("r") }} -

Координата центра окружности по оси x.

+Радиус окружности. -
    -
  • {{ SVGAttr("cy") }}
  • -
+## Интерфейс DOM -

Координата центра окружности по оси y.

+Этот элемент реализует интерфейс {{ domxref("SVGCircleElement") }}. -
    -
  • {{ SVGAttr("r") }}
  • -
- -

Радиус окружности.

- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс {{ domxref("SVGCircleElement") }}.

- -

Спецификации

+## Спецификации {{Specifications}} -

Поддержка браузерами

- -

{{Compat}}

- +## Поддержка браузерами +{{Compat}} -

Смотрите также

+## Смотрите также - +- {{ SVGElement("ellipse") }} +- [SVG Circle](https://www.svg-expert.ru/svg/circle/) diff --git a/files/ru/web/svg/element/defs/index.md b/files/ru/web/svg/element/defs/index.md index d0aa68ccfa6666..6740023bff279c 100644 --- a/files/ru/web/svg/element/defs/index.md +++ b/files/ru/web/svg/element/defs/index.md @@ -9,70 +9,65 @@ tags: translation_of: Web/SVG/Element/defs original_slug: Web/SVG/Элемент/defs --- -
{{SVGRef}}
+{{SVGRef}} -

SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <defs>. Объекты, созданные внутри элемента <defs> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.

+SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента **``**. Объекты, созданные внутри элемента `` не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования. -

Создание подобных элементов внутри элемента <defs> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.

+Создание подобных элементов внутри элемента `` способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра. -

<defs> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.

+`` также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}. -

Контекст использования

+## Контекст использования -

{{svginfo}}

+{{svginfo}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Conditional processing attributes](/ru/docs/Web/SVG/Attribute#Conditional_processing_attributes) +- [Core attributes](/ru/docs/Web/SVG/Attribute#Core_attributes) +- [Graphical event attributes](/ru/docs/Web/SVG/Attribute#Graphical_event_attributes) +- [Presentation attributes](/ru/docs/Web/SVG/Attribute#Presentation_attributes) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -

Специфичные атрибуты

+### Специфичные атрибуты -

Нет

+_Нет_ -

Интерфейс DOM

+## Интерфейс DOM -

Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.

+Элемент реализует интерфейс {{domxref("SVGDefsElement")}}. -

Пример

+## Пример -
<svg width="80px" height="30px" viewBox="0 0 80 30"
-     xmlns="http://www.w3.org/2000/svg">
+```xml
+
 
-  <defs>
-    <linearGradient id="Gradient01">
-      <stop offset="20%" stop-color="#39F" />
-      <stop offset="90%" stop-color="#F3F" />
-    </linearGradient>
-  </defs>
+  
+    
+      
+      
+    
+  
 
-  <rect x="10" y="10" width="60" height="10"
-        fill="url(#Gradient01)" />
-</svg>
-
+ + +``` -

Спецификации

+## Спецификации {{Specifications}} -

Браузерная совместимость

+## Браузерная совместимость -

{{Compat}}

+{{Compat}} -

+## Связанные темы -

Связанные темы

- -
    -
  • {{SVGElement("use")}}
  • -
+- {{SVGElement("use")}} diff --git a/files/ru/web/svg/element/ellipse/index.md b/files/ru/web/svg/element/ellipse/index.md index dc49400cda6bdd..3931fda3c85cfd 100644 --- a/files/ru/web/svg/element/ellipse/index.md +++ b/files/ru/web/svg/element/ellipse/index.md @@ -6,98 +6,81 @@ tags: translation_of: Web/SVG/Element/ellipse original_slug: Web/SVG/Элемент/ellipse --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент ellipse — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.

+Элемент `ellipse` — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов. -
-

Сам по себе элемент ellipse не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45°), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.

-
+> **Примечание:** Сам по себе элемент `ellipse `не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45**°**), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}. +```css hidden +html,body,svg { height:100% } +``` -
- +```html + + + +``` -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="100" cy="50" rx="100" ry="50" />
-</svg>
+{{EmbedLiveSample('LiveSample', 100, '100%')}} -

{{EmbedLiveSample('LiveSample', 100, '100%')}}

-
+## Атрибуты +- {{SVGAttr("cx")}} + - : Позиция эллипса по x. + _Тип значения_: [**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Length)|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage) ; _Значение по умолчанию_: `0`; _Можно анимировать_: **да** +- {{SVGAttr("cy")}} + - : Позиция эллипса по y. + _Тип значения_: [**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Length)|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage) ; _Значение по умолчанию_: `0`; _Можно анимировать_: **да** +- {{SVGAttr("rx")}} + - : Радиус эллипса по x. + _Тип значения_: `auto`|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Length)|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage) ;_Значение по умолчанию_: `auto`; _Можно анимировать_: **да** +- {{SVGAttr("ry")}} + - : Радиус эллипса по y. + _Тип значения_: `auto`|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Length)|[**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage) ; _Значение по умолчанию_: `auto`; _Можно анимировать_: **да** +- {{SVGAttr("pathLength")}} -

Атрибуты

+ - : Этот атрибут позволяет установить длину всего пути. + _Тип значения_: [**\**](https://developer.mozilla.org/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: _нет_; _Можно анимировать_: **да** + > **Примечание:** **Обратите внимание:** Начиная с SVG2, `cx`, `cy`, `rx` и `ry` это _Геометрические свойства_. Это означает, что они могут быть использованы как CSS-свойства элемента. -
-
{{SVGAttr("cx")}}
-
Позиция эллипса по x.
- Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
-
{{SVGAttr("cy")}}
-
Позиция эллипса по y.
- Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
-
{{SVGAttr("rx")}}
-
Радиус эллипса по x.
- Тип значения: auto|<length>|<percentage> ;Значение по умолчанию: auto; Можно анимировать: да
-
{{SVGAttr("ry")}}
-
Радиус эллипса по y.
- Тип значения: auto|<length>|<percentage> ; Значение по умолчанию: auto; Можно анимировать: да
-
{{SVGAttr("pathLength")}}
-

Этот атрибут позволяет установить длину всего пути.

-

Тип значения: <number> ; Значение по умолчанию: нет; Можно анимировать: да

-
-

Обратите внимание: Начиная с SVG2, cx, cy, rx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS-свойства элемента.

-
-
-
+### Глобальные Атрибуты -

Глобальные Атрибуты

+- [Основные атрибуты](https://developer.mozilla.org/docs/Web/SVG/Attribute/Core) + - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Атрибуты стиля](https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Условные атрибуты](https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing) + - : Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Атрибуты событий + - : [Глобальные атрибуты событий](https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Атрибуты графических событий](https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Атрибуты представления](https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation) + - : Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- ARIA-Атрибуты + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`,`aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`,`aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`,`aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`,`aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` -
-
Основные атрибуты
-
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стиля
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Условные атрибуты
-
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты событий
-
Глобальные атрибуты событий, Атрибуты графических событий
-
Атрибуты представления
-
Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA-Атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto,aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label,aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable,aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly,aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
+## Информация +{{svginfo}} -

Информация

+## Пример -

{{svginfo}}

+» [ellipse.svg](https://developer.mozilla.org/files/3253/ellipse.svg) +## Интерфейс DOM +Этот элемент реализует интерфейс {{ domxref("SVGEllipseElement") }}. -

Пример

- -

» ellipse.svg

- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс {{ domxref("SVGEllipseElement") }}.

- -

Спецификации

+## Спецификации {{Specifications}} -

Поддержка браузерами

- -

{{Compat}}

- +## Поддержка браузерами +{{Compat}} -

Смотрите также

+## Смотрите также -
    -
  • {{SVGElement("circle")}}
  • -
+- {{SVGElement("circle")}} diff --git a/files/ru/web/svg/element/feblend/index.md b/files/ru/web/svg/element/feblend/index.md index d734ae9b2a6534..79bf034aed7e72 100644 --- a/files/ru/web/svg/element/feblend/index.md +++ b/files/ru/web/svg/element/feblend/index.md @@ -6,91 +6,85 @@ tags: translation_of: Web/SVG/Element/feBlend original_slug: Web/SVG/Элемент/feBlend --- -
{{SVGRef}}
+{{SVGRef}} -

SVG фильтр примитивна <feBlend> объединяет два объекта, управляемых определённым режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоёв. Режим определяется атрибутом {{SVGAttr("mode")}}.

+[SVG ](/ru/docs/Web/SVG)фильтр примитивна **``** объединяет два объекта, управляемых определённым режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоёв. Режим определяется атрибутом {{SVGAttr("mode")}}. -

Используемый контекст

+## Используемый контекст -

{{svginfo}}

+{{svginfo}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Core attributes](/ru/docs/Web/SVG/Attribute#Core_attributes) +- [Presentation attributes](/ru/docs/Web/SVG/Attribute#Presentation_attributes) +- [Filter primitive attributes](/ru/docs/Web/SVG/Attribute#Filter_primitive_attributes) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -

Специальные атрибуты

+### Специальные атрибуты -
    -
  • {{SVGAttr("in")}}
  • -
  • {{SVGAttr("in2")}}
  • -
  • {{SVGAttr("mode")}}
  • -
+- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("mode")}} -

DOM Interface

+## DOM Interface -

Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.

+Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}. -

Пример

+## Пример -

SVG

+### SVG -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="spotlight">
-      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
-          flood-color="green" flood-opacity="1"/>
-      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
-    </filter>
-  </defs>
+```html
+
+  
+    
+      
+      
+    
+  
 
-  <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+  
+      style="filter:url(#spotlight);"/>
+
+```
 
-

Результат

+### Результат -

{{EmbedLiveSample("Пример", 200, 200)}}

+{{EmbedLiveSample("Пример", 200, 200)}} -

Спецификации

+## Спецификации {{Specifications}} -

Поддержка браузерами

- - - -

{{Compat}}

- -

Смотрите также

- -
    -
  • {{SVGElement("filter")}}
  • -
  • {{SVGElement("animate")}}
  • -
  • {{SVGElement("set")}}
  • -
  • {{SVGElement("feColorMatrix")}}
  • -
  • {{SVGElement("feComponentTransfer")}}
  • -
  • {{SVGElement("feComposite")}}
  • -
  • {{SVGElement("feConvolveMatrix")}}
  • -
  • {{SVGElement("feDiffuseLighting")}}
  • -
  • {{SVGElement("feDisplacementMap")}}
  • -
  • {{SVGElement("feFlood")}}
  • -
  • {{SVGElement("feGaussianBlur")}}
  • -
  • {{SVGElement("feImage")}}
  • -
  • {{SVGElement("feMerge")}}
  • -
  • {{SVGElement("feMorphology")}}
  • -
  • {{SVGElement("feOffset")}}
  • -
  • {{SVGElement("feSpecularLighting")}}
  • -
  • {{SVGElement("feTile")}}
  • -
  • {{SVGElement("feTurbulence")}}
  • -
  • SVG tutorial: Filter effects
  • -
+## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [SVG tutorial: Filter effects](/ru/docs/Web/SVG/Tutorial/Filter_effects) diff --git a/files/ru/web/svg/element/foreignobject/index.md b/files/ru/web/svg/element/foreignobject/index.md index 3bcdc3e5dec554..01b021b54725a0 100644 --- a/files/ru/web/svg/element/foreignobject/index.md +++ b/files/ru/web/svg/element/foreignobject/index.md @@ -4,17 +4,17 @@ slug: Web/SVG/Element/foreignObject translation_of: Web/SVG/Element/foreignObject original_slug: Web/SVG/Элемент/foreignObject --- -
{{SVGRef}}
-Элемент <foreignObject> SVG позволяет включать другое пространство имён XML.
-В контексте браузера это, скорее всего, XHTML / HTML.
+{{SVGRef}} +Элемент **``** [SVG](/ru/docs/Web/SVG) позволяет включать другое пространство имён XML. +В контексте браузера это, скорее всего, XHTML / HTML. -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```html
+
+  
 
-  <polygon points="5,5 195,10 185,185 10,195" />
+  
 
-  <!-- Типичный пример использования: встраивание HTML-текста в SVG -->
-  <foreignObject x="20" y="20" width="160" height="160">
-  <!--
+  
+  
+  
+    
+ - Смолчал хозяин, да и то, что мог сказать - Мне невдомёк, но во владениях чертога Поможет дом срубить да судьбы вам связать. - Не веришь ежли - испроси у Бога... - </div> - </foreignObject> -</svg> - -

{{EmbedLiveSample('Exemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("height")}}
-
Этот атрибут определяет высоту прямоугольника.
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("width")}}
-
Этот атрибут определяет ширину прямоугольника.
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("x")}}
-
Этот атрибут определяет координату x контейнера svg.
- Это не влияет на внешние элементы SVG.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("y")}}
-
Этот атрибут определяет координату Y контейнера SVG.
- Это не влияет на внешние элементы SVG.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -
-

Note: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Aria Attributes
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Примечания по использованию

- -

{{svginfo}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Совместимость браузера

- - - -

{{Compat}}

+ Не веришь ежли - испроси у Бога... + +
+
+``` + +{{EmbedLiveSample('Exemple', 150, '100%')}} + +## Атрибуты + +- {{SVGAttr("height")}} + - : Этот атрибут определяет высоту прямоугольника. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `auto`; _Animatable_: **yes** +- {{SVGAttr("width")}} + - : Этот атрибут определяет ширину прямоугольника. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `auto`; _Animatable_: **yes** +- {{SVGAttr("x")}} + - : Этот атрибут определяет координату x контейнера svg. + Это не влияет на внешние элементы SVG. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** +- {{SVGAttr("y")}} + - : Этот атрибут определяет координату Y контейнера SVG. + Это не влияет на внешние элементы SVG. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** + +> **Примечание:** Starting with SVG2 `x`, `y`, `width`, and `height` are \_Geometry Propertie_s, meaning those attributes can also be used as CSS properties for that element. + +### Глобальные атрибуты + +- [Core Attributes](/docs/Web/SVG/Attribute/Core) + - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Styling Attributes](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Conditional Processing Attributes](/docs/Web/SVG/Attribute/Conditional_Processing) + - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Event Attributes + - : [Global event attributes](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Graphical event attributes](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes), [Document event attributes](/docs/Web/SVG/Attribute/Events#Document_Event_Attributes), [Document element event attributes](/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes) +- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation) + - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Aria Attributes + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Примечания по использованию + +{{svginfo}} + +## Характеристики + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG1.1')}} | Initial definition | + +## Совместимость браузера + +{{Compat}} diff --git a/files/ru/web/svg/element/g/index.md b/files/ru/web/svg/element/g/index.md index 4162d0aca96dc8..ebdcd5c911b9d0 100644 --- a/files/ru/web/svg/element/g/index.md +++ b/files/ru/web/svg/element/g/index.md @@ -7,69 +7,62 @@ tags: translation_of: Web/SVG/Element/g original_slug: Web/SVG/Элемент/g --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.

+Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}. -

Контекст использования

+## Контекст использования -

{{svginfo}}

+{{svginfo}} -

Пример

+## Пример -
<svg viewBox="0 0 95 50"
-     xmlns="http://www.w3.org/2000/svg">
-   <g stroke="green" fill="white" stroke-width="5">
-     <circle cx="25" cy="25" r="15"/>
-     <circle cx="40" cy="25" r="15"/>
-     <circle cx="55" cy="25" r="15"/>
-     <circle cx="70" cy="25" r="15"/>
-   </g>
-</svg>
-
+```html + + + + + + + + +``` -

{{EmbedLiveSample("Пример",220,130)}}

+{{EmbedLiveSample("Пример",220,130)}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Conditional processing attributes](/ru/docs/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/ru/docs/SVG/Attribute#Core) » +- [Graphical event attributes](/ru/docs/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/ru/docs/SVG/Attribute#Presentation) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -

Специфичные атрибуты

+### Специфичные атрибуты -

Нет специфичных атрибутов.

+_Нет специфичных атрибутов._ -

Интерфейс DOM

+## Интерфейс DOM -

Этот элемент реализует SVGGElement интерес.

+Этот элемент реализует [`SVGGElement`](/en-US/docs/DOM/SVGGElement) интерес. -

Спецификации

+## Спецификации {{Specifications}} -

Поддержка браузерами

+## Поддержка браузерами -

{{Compat}}

+{{Compat}} +## Смотрите также: - -

Смотрите также:

- - - -
    -
  • {{SVGElement("use")}}
  • -
  • {{SVGElement("defs")}}
  • -
  • {{SVGElement("symbol")}}
  • -
  • SVG элемент g
  • -
+- {{SVGElement("use")}} +- {{SVGElement("defs")}} +- {{SVGElement("symbol")}} +- [SVG элемент g](http://tutorials.jenkov.com/svg/g-element.html) diff --git a/files/ru/web/svg/element/image/index.md b/files/ru/web/svg/element/image/index.md index 9aec32973b7cbe..707cb119174b00 100644 --- a/files/ru/web/svg/element/image/index.md +++ b/files/ru/web/svg/element/image/index.md @@ -7,65 +7,62 @@ tags: translation_of: Web/SVG/Element/image original_slug: Web/SVG/Элемент/image --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <image> позволяет включить растровые изображения в SVG документ.

+Элемент \ позволяет включить растровые изображения в SVG документ. -

Usage context

+## Usage context -

{{svginfo}}

+{{svginfo}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Conditional processing attributes](/ru/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/ru/docs/Web/SVG/Attribute#Core) » +- [Graphical event attributes](/ru/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Xlink attributes](/ru/docs/Web/SVG/Attribute#XLink) » +- [Presentation attributes](/ru/docs/Web/SVG/Attribute#Presentation) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -

Специфичные атрибуты

+### Специфичные атрибуты -
    -
  • {{SVGAttr("x")}}
  • -
  • {{SVGAttr("y")}}
  • -
  • {{SVGAttr("width")}}
  • -
  • {{SVGAttr("height")}}
  • -
  • {{SVGAttr("xlink:href")}}
  • -
  • {{SVGAttr("preserveAspectRatio")}}
  • -
+- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("width")}} +- {{SVGAttr("height")}} +- {{SVGAttr("xlink:href")}} +- {{SVGAttr("preserveAspectRatio")}} -

DOM Interface

+## DOM Interface -

This element implements the SVGImageElement interface.

+This element implements the [`SVGImageElement`](/en-US/docs/Web/API/SVGImageElement) interface. -

Пример

+## Пример -

Базовый рендеринг PNG изображения в качестве объекта SVG:

+Базовый рендеринг PNG изображения в качестве объекта SVG: -

SVG

+### SVG -
<svg width="200" height="200"
-  xmlns="http://www.w3.org/2000/svg">
-  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
-</svg>
-
+```html + + + +``` -

Результат

+### Результат -

{{EmbedLiveSample("Пример", 250, 260)}}

+{{EmbedLiveSample("Пример", 250, 260)}} -

Спецификации

+## Спецификации {{Specifications}} -

Browser compatibility

+## Browser compatibility -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/element/index.md b/files/ru/web/svg/element/index.md index 1ff131137ca750..395170b5904581 100644 --- a/files/ru/web/svg/element/index.md +++ b/files/ru/web/svg/element/index.md @@ -8,247 +8,223 @@ tags: translation_of: Web/SVG/Element original_slug: Web/SVG/Элемент --- -

« SVG / Справочник SVG атрибутов »

- -

SVG элементы

- -
A - -
    -
  • {{SVGElement("a")}}
  • -
  • {{SVGElement("altGlyph")}}
  • -
  • {{SVGElement("altGlyphDef")}}
  • -
  • {{SVGElement("altGlyphItem")}}
  • -
  • {{SVGElement("animate")}}
  • -
  • {{SVGElement("animateColor")}}
  • -
  • {{SVGElement("animateMotion")}}
  • -
  • {{SVGElement("animateTransform")}}
  • -
+« [SVG](/ru/docs/Web/SVG "SVG") / [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute "SVG/Attribute") » + +## SVG элементы + +A + +- {{SVGElement("a")}} +- {{SVGElement("altGlyph")}} +- {{SVGElement("altGlyphDef")}} +- {{SVGElement("altGlyphItem")}} +- {{SVGElement("animate")}} +- {{SVGElement("animateColor")}} +- {{SVGElement("animateMotion")}} +- {{SVGElement("animateTransform")}} + B C -
    -
  • {{SVGElement("circle")}}
  • -
  • {{SVGElement("clipPath")}}
  • -
  • {{SVGElement("color-profile")}}
  • -
  • {{SVGElement("cursor")}}
  • -
+- {{SVGElement("circle")}} +- {{SVGElement("clipPath")}} +- {{SVGElement("color-profile")}} +- {{SVGElement("cursor")}} + D -
    -
  • {{SVGElement("defs")}}
  • -
  • {{SVGElement("desc")}}
  • -
  • {{SVGElement("discard")}}
  • -
+- {{SVGElement("defs")}} +- {{SVGElement("desc")}} +- {{SVGElement("discard")}} + E -
    -
  • {{SVGElement("ellipse")}}
  • -
+- {{SVGElement("ellipse")}} + F -
    -
  • {{SVGElement("feBlend")}}
  • -
  • {{SVGElement("feColorMatrix")}}
  • -
  • {{SVGElement("feComponentTransfer")}}
  • -
  • {{SVGElement("feComposite")}}
  • -
  • {{SVGElement("feConvolveMatrix")}}
  • -
  • {{SVGElement("feDiffuseLighting")}}
  • -
  • {{SVGElement("feDisplacementMap")}}
  • -
  • {{SVGElement("feDistantLight")}}
  • -
  • {{SVGElement("feFlood")}}
  • -
  • {{SVGElement("feFuncA")}}
  • -
  • {{SVGElement("feFuncB")}}
  • -
  • {{SVGElement("feFuncG")}}
  • -
  • {{SVGElement("feFuncR")}}
  • -
  • {{SVGElement("feGaussianBlur")}}
  • -
  • {{SVGElement("feImage")}}
  • -
  • {{SVGElement("feMerge")}}
  • -
  • {{SVGElement("feMergeNode")}}
  • -
  • {{SVGElement("feMorphology")}}
  • -
  • {{SVGElement("feOffset")}}
  • -
  • {{SVGElement("fePointLight")}}
  • -
  • {{SVGElement("feSpecularLighting")}}
  • -
  • {{SVGElement("feSpotLight")}}
  • -
  • {{SVGElement("feTile")}}
  • -
  • {{SVGElement("feTurbulence")}}
  • -
  • {{SVGElement("filter")}}
  • -
  • {{SVGElement("font")}}
  • -
  • {{SVGElement("font-face")}}
  • -
  • {{SVGElement("font-face-format")}}
  • -
  • {{SVGElement("font-face-name")}}
  • -
  • {{SVGElement("font-face-src")}}
  • -
  • {{SVGElement("font-face-uri")}}
  • -
  • {{SVGElement("foreignObject")}}
  • -
+- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMergeNode")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- {{SVGElement("filter")}} +- {{SVGElement("font")}} +- {{SVGElement("font-face")}} +- {{SVGElement("font-face-format")}} +- {{SVGElement("font-face-name")}} +- {{SVGElement("font-face-src")}} +- {{SVGElement("font-face-uri")}} +- {{SVGElement("foreignObject")}} + G -
    -
  • {{SVGElement("g")}}
  • -
  • {{SVGElement("glyph")}}
  • -
  • {{SVGElement("glyphRef")}}
  • -
+- {{SVGElement("g")}} +- {{SVGElement("glyph")}} +- {{SVGElement("glyphRef")}} + H -
    -
  • {{SVGElement("hatch")}}
  • -
  • {{SVGElement("hatchpath")}}
  • -
  • {{SVGElement("hkern")}}
  • -
+- {{SVGElement("hatch")}} +- {{SVGElement("hatchpath")}} +- {{SVGElement("hkern")}} + I -
    -
  • {{SVGElement("image")}}
  • -
+- {{SVGElement("image")}} + J K L -
    -
  • {{SVGElement("line")}}
  • -
  • {{SVGElement("linearGradient")}}
  • -
+- {{SVGElement("line")}} +- {{SVGElement("linearGradient")}} + M -
    -
  • {{SVGElement("marker")}}
  • -
  • {{SVGElement("mask")}}
  • -
  • {{SVGElement("mesh")}}
  • -
  • {{SVGElement("meshgradient")}}
  • -
  • {{SVGElement("meshpatch")}}
  • -
  • {{SVGElement("meshrow")}}
  • -
  • {{SVGElement("metadata")}}
  • -
  • {{SVGElement("missing-glyph")}}
  • -
  • {{SVGElement("mpath")}}
  • -
+- {{SVGElement("marker")}} +- {{SVGElement("mask")}} +- {{SVGElement("mesh")}} +- {{SVGElement("meshgradient")}} +- {{SVGElement("meshpatch")}} +- {{SVGElement("meshrow")}} +- {{SVGElement("metadata")}} +- {{SVGElement("missing-glyph")}} +- {{SVGElement("mpath")}} + N O P -
    -
  • {{SVGElement("path")}}
  • -
  • {{SVGElement("pattern")}}
  • -
  • {{SVGElement("polygon")}}
  • -
  • {{SVGElement("polyline")}}
  • -
+- {{SVGElement("path")}} +- {{SVGElement("pattern")}} +- {{SVGElement("polygon")}} +- {{SVGElement("polyline")}} + Q R -
    -
  • {{SVGElement("radialGradient")}}
  • -
  • {{SVGElement("rect")}}
  • -
+- {{SVGElement("radialGradient")}} +- {{SVGElement("rect")}} + S -
    -
  • {{SVGElement("script")}}
  • -
  • {{SVGElement("set")}}
  • -
  • {{SVGElement("solidcolor")}}
  • -
  • {{SVGElement("stop")}}
  • -
  • {{SVGElement("style")}}
  • -
  • {{SVGElement("svg")}}
  • -
  • {{SVGElement("switch")}}
  • -
  • {{SVGElement("symbol")}}
  • -
+- {{SVGElement("script")}} +- {{SVGElement("set")}} +- {{SVGElement("solidcolor")}} +- {{SVGElement("stop")}} +- {{SVGElement("style")}} +- {{SVGElement("svg")}} +- {{SVGElement("switch")}} +- {{SVGElement("symbol")}} + T -
    -
  • {{SVGElement("text")}}
  • -
  • {{SVGElement("textPath")}}
  • -
  • {{SVGElement("title")}}
  • -
  • {{SVGElement("tref")}}
  • -
  • {{SVGElement("tspan")}}
  • -
-U +- {{SVGElement("text")}} +- {{SVGElement("textPath")}} +- {{SVGElement("title")}} +- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} -
    -
  • {{SVGElement("unknown")}}
  • -
  • {{SVGElement("use")}}
  • -
-V — Z +U -
    -
  • {{SVGElement("view")}}
  • -
  • {{SVGElement("vkern")}}
  • -
-
+- {{SVGElement("unknown")}} +- {{SVGElement("use")}} -

Элементы SVG по категориям

+V — Z -

Элементы анимации

+- {{SVGElement("view")}} +- {{SVGElement("vkern")}} -

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+## Элементы SVG по категориям -

Базовые фигуры

+### Элементы анимации -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}} -

Контейнеры

+### Базовые фигуры -

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}} -

Элементы описания

+### Контейнеры -

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}} -

Фильтры

+### Элементы описания -

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}} -

Элементы шрифта

+### Фильтры -

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}} -

Градиентные элементы

+### Элементы шрифта -

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}} -

Графические элементы

+### Градиентные элементы -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}} -

Элементы ссылки на графику

+### Графические элементы -

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} -

Источники света

+### Элементы ссылки на графику -

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+{{SVGElement("mesh")}}, {{SVGElement("use")}} -

Непрозрачные элементы

+### Источники света -

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} -

Элементы сервера печати

+### Непрозрачные элементы -

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} -

Отличительные элементы

+### Элементы сервера печати -

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}

+{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} -

Элементы формы

+### Отличительные элементы -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} -

Структурные элементы

+### Элементы формы -

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}} -

Элементы текстового контента

+### Структурные элементы -

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}} -

Текстовые контентные дочерние элементы

+### Элементы текстового контента -

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} -

Некатегоризированные элементы

+### Текстовые контентные дочерние элементы -

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

+{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} -

Смотрите также

+### Некатегоризированные элементы - +{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} -

+## Смотрите также -

+- [Ссылка на атрибут SVG](/ru/docs/Web/SVG/Attribute) +- [Учебник SVG](/ru/docs/Web/SVG/Tutorial) +- [Ссылка на интерфейс SVG](/ru/docs/Web/API/Document_Object_Model#SVG_interfaces) diff --git a/files/ru/web/svg/element/line/index.md b/files/ru/web/svg/element/line/index.md index ec3226f7e6b40b..6f1bf0c34a1e15 100644 --- a/files/ru/web/svg/element/line/index.md +++ b/files/ru/web/svg/element/line/index.md @@ -6,76 +6,68 @@ tags: translation_of: Web/SVG/Element/line original_slug: Web/SVG/Элемент/line --- -
{{SVGRef}}
- -

Элемент <line> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.

- -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
-
-  <!-- Если вы не укажете цвет контура,
-       линия не будет видна -->
-</svg>
- -

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

-
- -

Атрибуты

- -
-
{{SVGAttr('x1')}}
-
Определяет координату начальной точки линии по оси x .
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анеминуемый: да
-
{{SVGAttr('x2')}}
-
Определяет координату конечной точки линии по оси x.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анеминуемый: да
-
{{SVGAttr('y1')}}
-
Определяет координату начальной точки линии по оси y.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анеминуемый: да
-
{{SVGAttr('y2')}}
-
Определяет координату конечной точки линии по оси y.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анеминуемый: да
-
{{SVGAttr("pathLength")}}
-
Определяет общую длину пути в пользовательских единицах.
- Тип значения: <number> ; Значение по умолчанию: none; Анеминуемый: да
-
- -

Глобальные атрибуты

- -
-
Основные атрибуты
-
В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты оформления (стилей)
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Атрибуты условной обработки
-
В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты события
-
Глобальные атрибуты события, Графические атрибуты события
-
Атрибуты презентации
-
В первую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Атрибуты ARIA
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Спецификации

+{{SVGRef}} + +Элемент **``** одна из базовых фигур SVG, используемая для создания линии, связывающей две точки. + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + +``` + +{{EmbedLiveSample('Example', 100, 100)}} + +## Атрибуты + +- {{SVGAttr('x1')}} + - : Определяет координату начальной точки линии по оси x . + _Тип значения:_ [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage)|[**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: `0`; А*неминуемый*: **да** +- {{SVGAttr('x2')}} + - : Определяет координату конечной точки линии по оси x. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage)|[**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: `0`; А*неминуемый*: **да** +- {{SVGAttr('y1')}} + - : Определяет координату начальной точки линии по оси y. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage)|[**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: `0`; А*неминуемый*: **да** +- {{SVGAttr('y2')}} + - : Определяет координату конечной точки линии по оси y. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage)|[**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: `0`; А*неминуемый*: **да** +- {{SVGAttr("pathLength")}} + - : Определяет общую длину пути в пользовательских единицах. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: _none_; А*неминуемый*: **да** + +### Глобальные атрибуты + +- [Основные атрибуты](/docs/Web/SVG/Attribute/Core) + - : В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Атрибуты оформления (стилей)](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Атрибуты условной обработки](/docs/Web/SVG/Attribute/Conditional_Processing) + - : В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Атрибуты события + - : [Глобальные атрибуты события](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Графические атрибуты события](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Атрибуты презентации](/docs/Web/SVG/Attribute/Presentation) + - : В первую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Атрибуты ARIA + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Спецификации {{Specifications}} -

Поддержка браузерами

- -

{{Compat}}

+## Поддержка браузерами -

+{{Compat}} -

Смотрите также:

+## Смотрите также: - +- {{SVGElement("polygon")}} +- {{SVGElement("path")}} +- [SVG Line - описание и примеры](https://www.svg-expert.ru/svg/line/) diff --git a/files/ru/web/svg/element/lineargradient/index.md b/files/ru/web/svg/element/lineargradient/index.md index 5034823e8a3269..6e7c91fb6e73eb 100644 --- a/files/ru/web/svg/element/lineargradient/index.md +++ b/files/ru/web/svg/element/lineargradient/index.md @@ -8,90 +8,84 @@ tags: translation_of: Web/SVG/Element/linearGradient original_slug: Web/SVG/Элемент/linearGradient --- -
{{SVGRef}}
- -

<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.

- -
-

Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

-
- -
- - -
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="myGradient" gradientTransform="rotate(90)">
-      <stop offset="5%"  stop-color="gold" />
-      <stop offset="95%" stop-color="red" />
-    </linearGradient>
-  </defs>
-
-  <!-- using my linear gradient -->
-  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
-</svg>
- -

{{EmbedLiveSample('Example', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("gradientUnits")}}
-
Определяет систему координат для атрибутов x1, x2, y1, y2
- Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: objectBoundingBox; Анимируемый: да
-
{{SVGAttr("gradientTransform")}}
-
Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента.
- Тип значения: <transform-list> ; Значение по умолчанию: identity transform; Анимируемый: да
-
{{SVGAttr("href")}}
-
Этот атрибут определяет ссылку на другой элемент <linearGradient>, который будет использоваться в качестве шаблона.
- Тип значения: <URL> ; Значение по умолчанию: none; Анимируемый: да
-
{{SVGAttr("spreadMethod")}}
-
Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.
- Тип значения: pad|reflect|repeat ; Значение по умолчанию: pad; Анимируемый: да
-
{{SVGAttr("x1")}}
-
Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
- Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
-
{{SVGAttr("x2")}}
-
Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
- Тип значения: <length> ; Значение по умолчанию: 100%; Анимируемый: да
-
{{SVGAttr("xlink:href")}}
-
{{Deprecated_Header}}<IRI> ссылка на другой <linearGradient> элемент, который будет использоваться в качестве шаблона.
- Тип значения: <IRI> ; Значение по умолчанию: none; Анимируемый: да
-
{{SVGAttr("y1")}}
-
Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
- Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
-
{{SVGAttr("y2")}}
-
Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
- Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
-
- -

Глобальные атрибуты

- -
-
Основные атрибуты
-
Прежде всего: {{SVGAttr('id')}}
-
Атрибуты стилизации
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Атрибуты событий
-
Глобальные атрибуты событий, Атрибуты событий элементов документа
-
Атрибуты презентации
-
Прежде всего: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
XLink атрибуты
-
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}
-
- -

Примечания по использованию

- -

{{svginfo}}

- -

Спецификации

+{{SVGRef}} + +**``** позволяет определять линейные градиенты для заполнения или изменения графических элементов. + +> **Примечание:** Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам. + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + + + +``` + +{{EmbedLiveSample('Example', 150, '100%')}} + +## Атрибуты + +- {{SVGAttr("gradientUnits")}} + - : Определяет систему координат для атрибутов `x1`, `x2`, `y1`, `y2` + _Тип значения_: `userSpaceOnUse`|`objectBoundingBox` ; _Значение по умолчанию_: `objectBoundingBox`; _Анимируемый_: **да** +- {{SVGAttr("gradientTransform")}} + - : Этот атрибут обеспечивает дополнительное [преобразование](/ru/docs/Web/SVG/Attribute/transform) для системы координат градиента. + _Тип значения_: **[\](/ru/docs/Web/SVG/Content_type#transform-list)** ; _Значение по умолчанию_: _identity transform_; _Анимируемый_: **да** +- {{SVGAttr("href")}} + - : Этот атрибут определяет ссылку на другой элемент ``, который будет использоваться в качестве шаблона. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#url) ; _Значение по умолчанию_: none; _Анимируемый_: **да** +- {{SVGAttr("spreadMethod")}} + - : Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. + _Тип значения_: `pad`|`reflect`|`repeat` ; _Значение по умолчанию_: `pad`; _Анимируемый_: **да** +- {{SVGAttr("x1")}} + - : Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#length) ; _Значение по умолчанию_: `0%`; _Анимируемый_: **да** +- {{SVGAttr("x2")}} + - : Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#length) ; _Значение по умолчанию_: `100%`; _Анимируемый_: **да** +- {{SVGAttr("xlink:href")}} + - : {{Deprecated_Header}}[\](/ru/docs/Web/SVG/Content_type#iri) ссылка на другой `` элемент, который будет использоваться в качестве шаблона. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#iri) ; _Значение по умолчанию_: none; _Анимируемый_: **да** +- {{SVGAttr("y1")}} + - : Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#length) ; _Значение по умолчанию_: `0%`; _Анимируемый_: **да** +- {{SVGAttr("y2")}} + - : Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент. + _Тип значения_: [**\**](/ru/docs/Web/SVG/Content_type#length) ; _Значение по умолчанию_: `0%`; _Анимируемый_: **да** + +### Глобальные атрибуты + +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute/Core) + - : Прежде всего: {{SVGAttr('id')}} +- [Атрибуты стилизации](/ru/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- Атрибуты событий + - : [Глобальные атрибуты событий](/ru/docs/Web/SVG/Attribute/Events#global_event_attributes), [Атрибуты событий элементов документа](/ru/docs/Web/SVG/Attribute/Events#document_element_event_attributes) +- [Атрибуты презентации](/ru/docs/Web/SVG/Attribute/Presentation) + - : Прежде всего: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- XLink атрибуты + - : {{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}} + +## Примечания по использованию + +{{svginfo}} + +## Спецификации {{Specifications}} -

Совместимость с браузерами

+## Совместимость с браузерами -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/element/path/index.md b/files/ru/web/svg/element/path/index.md index 84fdb5cfe9847c..9a1aca0979c786 100644 --- a/files/ru/web/svg/element/path/index.md +++ b/files/ru/web/svg/element/path/index.md @@ -4,69 +4,63 @@ slug: Web/SVG/Element/path translation_of: Web/SVG/Element/path original_slug: Web/SVG/Элемент/path --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <path> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.

+Элемент **``** является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path. -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path d="M 10,30
+```html
+
+  
-
-

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

-
- -

Атрибуты

- -
-
{{SVGAttr("d")}}
-
Этот атрибут определяет форму.
- Тип значения: <string> ; Значение по умолчанию: ''; Анимирование: Да
-
{{SVGAttr("pathLength")}}
-
Этот атрибут позволяет указывать общую длину в пользовательских единицах.
- Тип значения: <number> ; Значение по умолчанию:нет; Анимирование: Да
-
- -

Глобальные атрибуты

- -
-
Атрибуты ядра
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стиля
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Атрибуты условной обработки
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты событий
-
Атрибуты глобальных событий, Атрибуты графических событий
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Использование

- -

{{svginfo}}

- -

Спецификация

+ Q 10,60 10,30 z"/> + +``` + +{{EmbedLiveSample('Example', 100, 100)}} + +## Атрибуты + +- {{SVGAttr("d")}} + - : Этот атрибут определяет форму. + _Тип значения_: **\** ; _Значение по умолчанию_: `''`; _Анимирование_: **Да** +- {{SVGAttr("pathLength")}} + - : Этот атрибут позволяет указывать общую длину в пользовательских единицах. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_:_нет_; _Анимирование_: **Да** + +### Глобальные атрибуты + +- [Атрибуты ядра](/docs/Web/SVG/Attribute/Core) + - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Атрибуты стиля](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Атрибуты условной обработки](/docs/Web/SVG/Attribute/Conditional_Processing) + - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Атрибуты событий + - : [Атрибуты глобальных событий](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Атрибуты графических событий](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation) + - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- ARIA атрибуты + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Использование + +{{svginfo}} + +## Спецификация {{Specifications}} -

Совместимость браузера

+## Совместимость браузера -

{{Compat}}

+{{Compat}} -

Смотрите также

+## Смотрите также -
    -
  • SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
  • -
  • The MDN SVG "Getting Started" tutorial : Path
  • -
+- SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }} +- [The MDN SVG "Getting Started" tutorial : Path](/ru/docs/Web/SVG/Tutorial/Paths) diff --git a/files/ru/web/svg/element/pattern/index.md b/files/ru/web/svg/element/pattern/index.md index 6e5677dedb7d74..a3df92339d2c5d 100644 --- a/files/ru/web/svg/element/pattern/index.md +++ b/files/ru/web/svg/element/pattern/index.md @@ -6,118 +6,97 @@ tags: translation_of: Web/SVG/Element/pattern original_slug: Web/SVG/Элемент/pattern --- -
{{SVGRef}}
-Элемент <pattern> определяет графический объект, который может быть перерисован с повторяющимися координатами x и y («мозаичным»), чтобы покрыть область.
- -

-На ссылку <pattern> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном.
- -
- -
- - -
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
-      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
-    </pattern>
-  </defs>
-
-  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
-  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
-</svg>
- -

{{EmbedLiveSample('Exemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("height")}}
-
Этот атрибут определяет высоту плитки шаблона.
- Value type: <length>|<percentage>; Default value: 0; Animatable: yes
-
{{SVGAttr("href")}}
-
Этот атрибут по умолчанию ссылается на пример шаблона для <pattern>
- Value type: <URL>; Default value: none; Animatable: yes
-
{{SVGAttr("patternContentUnits")}}
-
Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}.
- Value type: userSpaceOnUse|objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes -

Сноска: Этот атрибут не действует, если в элементе <pattern> указан атрибут viewBox.

-
-
{{SVGAttr("patternTransform")}}
-
Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
- Value type: <transform-list>; Default value: none; Animatable: yes
-
{{SVGAttr("patternUnits")}}
-
Этот атрибут определяет систему координат для атрибутов x, y, width и height.
- Value type: userSpaceOnUse|objectBoundingBox; Default value: objectBoundingBox; Animatable: yes
-
{{SVGAttr("preserveAspectRatio")}}
-
Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
- Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
-
{{SVGAttr("viewBox")}}
-
Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
- Value type: <list-of-numbers> ; Default value: none; Animatable: yes
-
{{SVGAttr("width")}}
-
Этот атрибут определяет ширину плитки шаблона.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("x")}}
-
Этот атрибут определяет смещение координаты x мозаичного изображения.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
-
Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <pattern>.
- Value type: <URL>; Default value: none; Animatable: yes -

Сноска: Для браузеров, реализующих href, если заданы как href, так и xlink:href, xlink:href будет игнорироваться, используя только href.

-
-
{{SVGAttr("y")}}
-
Этот атрибут определяет смещение координат y мозаичного элемента.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
XLink Attributes
-
Most notably: {{SVGAttr("xlink:title")}}
-
- -

Нотации

- -

{{svginfo}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
ХарактеристикиСтатусКоммент
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Совместимость браузера

- -

{{Compat}}

+{{SVGRef}} +Элемент **``** определяет графический объект, который может быть перерисован с повторяющимися координатами **x** и **y** («мозаичным»), чтобы покрыть область. +На ссылку `` ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других [графических элементах](/ru/docs/Web/SVG/Tutorial/Basic_Shapes) , чтобы заполнить или обвести эти элементы указанным шаблоном. + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + + +``` + +{{EmbedLiveSample('Exemple', 150, '100%')}} + +## Атрибуты + +- {{SVGAttr("height")}} + - : Этот атрибут определяет высоту плитки шаблона. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage); _Default value_: `0`; _Animatable_: **yes** +- {{SVGAttr("href")}} + - : Этот атрибут по умолчанию ссылается на пример шаблона для `` + _Value type_: [**\**](/docs/Web/SVG/Content_type#URL); _Default value_: _none_; _Animatable_: **yes** +- {{SVGAttr("patternContentUnits")}} + + - : Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. + _Value type_: `userSpaceOnUse`|`objectBoundingBox`; _Default value_: `userSpaceOnUse`; _Animatable_: **yes** + + > **Примечание:** **Сноска:** Этот атрибут не действует, если в элементе `` указан атрибут `viewBox`. + +- {{SVGAttr("patternTransform")}} + - : Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат. + _Value type_: **[\](/docs/Web/SVG/Content_type#Transform-list)**; _Default value_: _none_; _Animatable_: **yes** +- {{SVGAttr("patternUnits")}} + - : Этот атрибут определяет систему координат для атрибутов `x`, `y`, `width` и `height`. + _Value type_: `userSpaceOnUse`|`objectBoundingBox`; _Default value_: `objectBoundingBox`; _Animatable_: **yes** +- {{SVGAttr("preserveAspectRatio")}} + - : Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон. + _Value type_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Default value_: `xMidYMid meet`; _Animatable_: **yes** +- {{SVGAttr("viewBox")}} + - : Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона. + _Value type_: **[\](/docs/Web/SVG/Content_type#List-of-Ts)** ; _Default value_: none; _Animatable_: **yes** +- {{SVGAttr("width")}} + - : Этот атрибут определяет ширину плитки шаблона. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** +- {{SVGAttr("x")}} + - : Этот атрибут определяет смещение координаты x мозаичного изображения. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** +- {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}} + + - : Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов ``. + _Value type_: [**\**](/docs/Web/SVG/Content_type#URL); _Default value_: _none_; _Animatable_: **yes** + + > **Примечание:** **Сноска:** Для браузеров, реализующих `href`, если заданы как `href`, так и `xlink:href`, `xlink:href` будет игнорироваться, используя только `href`. + +- {{SVGAttr("y")}} + - : Этот атрибут определяет смещение координат y мозаичного элемента. + _Value type_: [**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** + +### Глобальные атрибуты + +- [Core Attributes](/docs/Web/SVG/Attribute/Core) + - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Styling Attributes](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Conditional Processing Attributes](/docs/Web/SVG/Attribute/Conditional_Processing) + - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation) + - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- XLink Attributes + - : Most notably: {{SVGAttr("xlink:title")}} + +## Нотации + +{{svginfo}} + +## Характеристики + +| Характеристики | Статус | Коммент | +| ---------------------------------------------------------------------------------------- | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}} | {{Spec2('SVG1.1')}} | Initial definition | + +## Совместимость браузера + +{{Compat}} diff --git a/files/ru/web/svg/element/polygon/index.md b/files/ru/web/svg/element/polygon/index.md index 6241cd5dd3fa26..88ee9a6fcc3964 100644 --- a/files/ru/web/svg/element/polygon/index.md +++ b/files/ru/web/svg/element/polygon/index.md @@ -6,71 +6,63 @@ tags: translation_of: Web/SVG/Element/polygon original_slug: Web/SVG/Элемент/polygon --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <polygon> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.

+Элемент **``** описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}. -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Example of a polygon with the default fill -->
-  <polygon points="0,100 50,25 50,75 100,0" />
+```html
+
+  
+  
 
-  <!-- Example of the same polygon shape with stroke and no fill -->
-  <polygon points="100,100 150,25 150,75 200,0"
-            fill="none" stroke="black" />
-</svg>
+ + + +``` -

{{EmbedLiveSample('Exemple', 100, 100)}}

-
+{{EmbedLiveSample('Exemple', 100, 100)}} -

Атрибуты

+## Атрибуты -
-
{{SVGAttr('points')}}
-
Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.
- Тип значения: <number>+ ; Значение по умолчанию: ""; Анимируемый: да
-
{{SVGAttr("pathLength")}}
-
Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.
- Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
-
+- {{SVGAttr('points')}} + - : Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Number)+ ; _Значение по умолчанию_: `""`; _Анимируемый_: **да** +- {{SVGAttr("pathLength")}} + - : Данный атрибут позволяет указывать общую длину пути в пользовательских единицах. + _Тип значения_: [**\**](/docs/Web/SVG/Content_type#Number) ; _Значение по умолчанию_: _none_; _Анимируемый_: **да** -

Global attributes

+### Global attributes -
-
Основные атрибуты
-
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стилизации
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Условные атрибуты
-
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты событий
-
Атрибуты глобальных событий, Атрибуты графических событий
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
+- [Основные атрибуты](/docs/Web/SVG/Attribute/Core) + - : Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Атрибуты стилизации](/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Условные атрибуты](/docs/Web/SVG/Attribute/Conditional_Processing) + - : Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Атрибуты событий + - : [Атрибуты глобальных событий](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Атрибуты графических событий](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation) + - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- ARIA атрибуты + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` -

Usage notes

+## Usage notes -

{{svginfo}}

+{{svginfo}} -

Спецификации

+## Спецификации {{Specifications}} -

Совместимость с браузерами

+## Совместимость с браузерами +{{Compat}} +## Смотрите также -

{{Compat}}

- -

Смотрите также

- -
    -
  • Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
  • -
+- Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, **{{ SVGElement('polyline') }}**, **{{ SVGElement('rect') }}** diff --git a/files/ru/web/svg/element/radialgradient/index.md b/files/ru/web/svg/element/radialgradient/index.md index 44f28e3c7ca580..1be83ca6a09922 100644 --- a/files/ru/web/svg/element/radialgradient/index.md +++ b/files/ru/web/svg/element/radialgradient/index.md @@ -7,99 +7,76 @@ tags: translation_of: Web/SVG/Element/radialGradient original_slug: Web/SVG/Элемент/radialGradient --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <radialGradient> SVG позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.

+Элемент **``** [SVG](/ru/docs/Web/SVG) позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов. -

Контекст использования

+## Контекст использования -

{{svginfo}}

+{{svginfo}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute#Core_attributes) » +- [Атрибуты презентации](/ru/docs/Web/SVG/Attribute#Presentation_attributes) » +- [Атрибуты Xlink](/ru/docs/Web/SVG/Attribute#XLink_attributes) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} -

Специфические атрибуты

+### Специфические атрибуты -
    -
  • {{SVGAttr("gradientUnits")}}
  • -
  • {{SVGAttr("gradientTransform")}}
  • -
  • {{SVGAttr("cx")}}
  • -
  • {{SVGAttr("cy")}}
  • -
  • {{SVGAttr("r")}}
  • -
  • {{SVGAttr("fx")}}
  • -
  • {{SVGAttr("fy")}}
  • -
  • {{SVGAttr("fr")}}
  • -
  • {{SVGAttr("spreadMethod")}}
  • -
  • {{SVGAttr("xlink:href")}}
  • -
+- {{SVGAttr("gradientUnits")}} +- {{SVGAttr("gradientTransform")}} +- {{SVGAttr("cx")}} +- {{SVGAttr("cy")}} +- {{SVGAttr("r")}} +- {{SVGAttr("fx")}} +- {{SVGAttr("fy")}} +- {{SVGAttr("fr")}} +- {{SVGAttr("spreadMethod")}} +- {{SVGAttr("xlink:href")}} -

DOM интерфейс

+## DOM интерфейс -

Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.

+Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс. -

Пример

+## Пример -

SVG

+### SVG -
<svg width="120" height="120" viewBox="0 0 120 120"
-   xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <defs>
-    <radialGradient id="exampleGradient">
-      <stop offset="10%" stop-color="gold"/>
-      <stop offset="95%" stop-color="green"/>
-    </radialGradient>
-  </defs>
+  
+    
+      
+      
+    
+  
 
-  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
-</svg>
+ + +``` -

Результат

+### Результат -

{{EmbedLiveSample("Пример", 120, 120)}}

+{{EmbedLiveSample("Пример", 120, 120)}} -

Характеристики

+## Характеристики - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG2')}}Добавлен атрибут fr
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
+| Спецификация | Статус | Коммент | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | --------------------- | +| {{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}} | {{Spec2('SVG2')}} | Добавлен атрибут `fr` | +| {{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}} | {{Spec2('SVG1.1')}} | Начальное определение | -

Совместимость с браузером

+## Совместимость с браузером -

{{Compat}}

+{{Compat}} -

+## Смотрите также -

Смотрите также

- -
    -
  • {{SVGElement("linearGradient")}}
  • -
+- {{SVGElement("linearGradient")}} diff --git a/files/ru/web/svg/element/rect/index.md b/files/ru/web/svg/element/rect/index.md index 7a63bb38900be9..30345afc57f7f5 100644 --- a/files/ru/web/svg/element/rect/index.md +++ b/files/ru/web/svg/element/rect/index.md @@ -7,106 +7,80 @@ tags: translation_of: Web/SVG/Element/rect original_slug: Web/SVG/Элемент/rect --- -
{{SVGRef}}
- -

<rect> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скруглёнными углами.

- -

Контекст использования

- - - - - - - - - - - - - - - - -
КатегорияПростая фигура, Графический элемент
Разрешённое содержимоеЛюбое количество указанных элементов в любом порядке:
- Элементы анимации »
- Элементы описания »
Нормативный документSVG 1.1 (2ое издание)
- -

Пример

- -

Простой пример использования rect

- -

- -
<?xml version="1.0"?>
-<svg width="120" height="120"
-     viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg">
+{{SVGRef}}
 
-  <rect x="10" y="10" width="100" height="100"/>
-</svg>
+`` - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скруглёнными углами. -

+## Контекст использования -

» rect-1.svg

+| Категория | Простая фигура, Графический элемент | +| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Разрешённое содержимое | Любое количество указанных элементов в любом порядке: [Элементы анимации](/en/SVG/Element#Animation "en/SVG/Attribute#Animation") » [Элементы описания](/en/SVG/Element#Descriptive "en/SVG/Attribute#Descriptive") » | +| Нормативный документ | [SVG 1.1 (2ое издание)](http://www.w3.org/TR/SVG/shapes.html#RectElement) | -

<rect> со скруглёнными углами

+## Пример -

+### Простой пример использования rect -
<?xml version="1.0"?>
-<svg width="120" height="120"
+```xml
+
+
 
-  <rect x="10" y="10"
-        width="100" height="100"
-        rx="15" ry="15"/>
+  
+
+```
+
+» [rect-1.svg](https://mdn.mozillademos.org/files/8893/rect-1.svg)
 
-</svg>
+### `` со скруглёнными углами -

» rect-2.svg

+```xml + + + + -

Атрибуты

+ +``` -

Глобальные атрибуты

+» [rect-2.svg](https://mdn.mozillademos.org/files/8897/rect-2.svg) - +## Атрибуты -

Специальные атрибуты

+### Глобальные атрибуты -
    -
  • {{ SVGAttr("x") }}
  • -
  • {{ SVGAttr("y") }}
  • -
  • {{ SVGAttr("width") }}
  • -
  • {{ SVGAttr("height") }}
  • -
  • {{ SVGAttr("rx") }}
  • -
  • {{ SVGAttr("ry") }}
  • -
+- [Атрибуты условной обработки](/en/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Атрибуты ядра](/en/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Атрибуты графических собы](/en/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent")тий » +- [Атрибуты представления](/en/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -

DOM Интерфейс

+### Специальные атрибуты -

Данный элемент реализует интерфейс SVGRectElement .

+- {{ SVGAttr("x") }} +- {{ SVGAttr("y") }} +- {{ SVGAttr("width") }} +- {{ SVGAttr("height") }} +- {{ SVGAttr("rx") }} +- {{ SVGAttr("ry") }} -

Совместимость с браузерами

+## DOM Интерфейс -

+Данный элемент реализует интерфейс [`SVGRectElement`](/en/DOM/SVGRectElement "en/DOM/SVGRectElement") . -

{{Compat}}

+## Совместимость с браузерами -

+{{Compat}} -

Смотрите также

+## Смотрите также -
    -
  • {{ SVGElement("path") }}
  • -
+- {{ SVGElement("path") }} diff --git a/files/ru/web/svg/element/svg/index.md b/files/ru/web/svg/element/svg/index.md index e31a4b13d6ebd7..f95f0d84172eab 100644 --- a/files/ru/web/svg/element/svg/index.md +++ b/files/ru/web/svg/element/svg/index.md @@ -4,97 +4,87 @@ slug: Web/SVG/Element/svg translation_of: Web/SVG/Element/svg original_slug: Web/SVG/Элемент/svg --- -
{{SVGRef}}
- -

Элемент svg является контейнером, который определяет новую систему координат и область просмотра. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.

- -
-

Примечание. Атрибут xmlns требуется только для самого внешнего элемента svg документов SVG. Это не нужно для внутренних элементов svg или внутри документов HTML.

-
- -
- - -
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
-  <circle cx="50" cy="50" r="40" />
-  <circle cx="150" cy="50" r="4" />
-
-  <svg viewBox="0 0 10 10" x="200" width="100">
-    <circle cx="5" cy="5" r="4" />
-  </svg>
-</svg>
- -

{{EmbedLiveSample('Exeemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}
-
The minimum SVG language profile that the document requires.
- Value type: <string> ; Default value: none; Animatable: no
-
{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}
-
Язык сценариев по умолчанию, используемый фрагментом SVG.
- Value type: <string> ; Default value: application/ecmascript; Animatable: no
-
{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}
-
Язык таблицы стилей по умолчанию, используемый фрагментом SVG.
- Value type: <string> ; Default value: text/css; Animatable: no
-
{{SVGAttr("height")}}
-
Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("preserveAspectRatio")}}
-
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
- Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
-
{{SVGAttr("version")}} {{deprecated_inline('svg2')}}
-
Какая версия SVG используется для внутреннего содержимого элемента.
- Value type: <number> ; Default value: none; Animatable: no
-
{{SVGAttr("viewBox")}}
-
Координаты области просмотра SVG для текущего фрагмента SVG.
- Value type: <list-of-numbers> ; Default value: none; Animatable: yes
-
{{SVGAttr("width")}}
-
Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("x")}}
-
The displayed x coordinate of the svg container. No effect on outermost svg elements.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("y")}}
-
The displayed y coordinate of the svg container. No effect on outermost svg elements.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -
-

Примечание. Начиная с SVG2, x, y, width и height являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.

-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Aria атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Примечания по использованию

- -

{{svginfo}}

- -

Спецификации

+{{SVGRef}} + +Элемент `svg` является контейнером, который определяет новую систему координат и [область просмотра](/ru/docs/Web/SVG/Attribute/viewBox). Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML. + +> **Примечание:** Примечание. Атрибут `xmlns` требуется только для самого внешнего элемента `svg` документов SVG. Это не нужно для внутренних элементов `svg` или внутри документов HTML. + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + +``` + +{{EmbedLiveSample('Exeemple', 150, '100%')}} + +## Атрибуты + +- {{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}} + - : The minimum SVG language profile that the document requires. + _Value type_: **\** ; _Default value_: none; _Animatable_: **no** +- {{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}} + - : Язык сценариев по умолчанию, используемый фрагментом SVG. + _Value type_: **\** ; _Default value_: `application/ecmascript`; _Animatable_: **no** +- {{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}} + - : Язык таблицы стилей по умолчанию, используемый фрагментом SVG. + _Value type_: **\** ; _Default value_: `text/css`; _Animatable_: **no** +- {{SVGAttr("height")}} + - : Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.) + _Value type_: [**\**](/ru/docs/Web/SVG/Content_type#Length)|[**\**](/ru/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `auto`; _Animatable_: **yes** +- {{SVGAttr("preserveAspectRatio")}} + - : How the `svg` fragment must be deformed if it is displayed with a different aspect ratio. + _Value type_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Default value_: `xMidYMid meet`; _Animatable_: **yes** +- {{SVGAttr("version")}} {{deprecated_inline('svg2')}} + - : Какая версия SVG используется для внутреннего содержимого элемента. + _Value type_: **[\](/ru/docs/Web/SVG/Content_type#Number)** ; _Default value_: none; _Animatable_: **no** +- {{SVGAttr("viewBox")}} + - : Координаты области просмотра SVG для текущего фрагмента SVG. + _Value type_: **[\](/ru/docs/Web/SVG/Content_type#List-of-Ts)** ; _Default value_: none; _Animatable_: **yes** +- {{SVGAttr("width")}} + - : Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.) + _Value type_: [**\**](/ru/docs/Web/SVG/Content_type#Length)|[**\**](/ru/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `auto`; _Animatable_: **yes** +- {{SVGAttr("x")}} + - : The displayed x coordinate of the svg container. No effect on outermost `svg` elements. + _Value type_: [**\**](/ru/docs/Web/SVG/Content_type#Length)|[**\**](/ru/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** +- {{SVGAttr("y")}} + - : The displayed y coordinate of the svg container. No effect on outermost `svg` elements. + _Value type_: [**\**](/ru/docs/Web/SVG/Content_type#Length)|[**\**](/ru/docs/Web/SVG/Content_type#Percentage) ; _Default value_: `0`; _Animatable_: **yes** + +> **Примечание:** Примечание. Начиная с SVG2, `x`, `y`, `width` и `height` являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств. + +### Глобальные атрибуты + +- [Core Attributes](/ru/docs/Web/SVG/Attribute/Core) + - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Styling Attributes](/ru/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Conditional Processing Attributes](/ru/docs/Web/SVG/Attribute/Conditional_Processing) + - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Event Attributes + - : [Global event attributes](/ru/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Graphical event attributes](/ru/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes), [Document event attributes](/ru/docs/Web/SVG/Attribute/Events#Document_Event_Attributes), [Document element event attributes](/ru/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes) +- [Presentation Attributes](/ru/docs/Web/SVG/Attribute/Presentation) + - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Aria атрибуты + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Примечания по использованию + +{{svginfo}} + +## Спецификации {{Specifications}} -

Кросс-браузерность

+## Кросс-браузерность - - -

{{Compat}}

+{{Compat}} diff --git a/files/ru/web/svg/element/text/index.md b/files/ru/web/svg/element/text/index.md index a83e88ab6ce56c..f7a48c3029ec6f 100644 --- a/files/ru/web/svg/element/text/index.md +++ b/files/ru/web/svg/element/text/index.md @@ -8,182 +8,169 @@ tags: translation_of: Web/SVG/Element/text original_slug: Web/SVG/Элемент/ --- -
{{SVGRef}}
+{{SVGRef}} -

SVG элемент <text> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <text> можно применить градиент, шаблон, окантовку, маску или фильтр.

+SVG элемент **``** определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу `` можно применить градиент, шаблон, окантовку, маску или фильтр. -

Текст не будет отображаться, если он не находится внутри SVG элемента <text>. Это отличается от сокрытия по умолчанию, поскольку установка свойства display не отображает текст.

+Текст не будет отображаться, если он не находится внутри SVG элемента ``. Это отличается от сокрытия по умолчанию, поскольку установка [свойства display](/ru/docs/Web/SVG/Attribute/display) не отображает текст. -

Пример

+## Пример -
- +```css hidden + html,body,svg { height:100% } -
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```
+
+```html
+
+  
 
-  <text x="20" y="35" class="small">Мой</text>
-  <text x="60" y="35" class="heavy">кот</text>
-  <text x="60" y="55" class="small">очень</text>
-  <text x="100" y="55" class="Rrrrr">Сердит!</text>
-</svg>
-
-
+ Мой + кот + очень + Сердит! + +``` -

{{EmbedLiveSample('Пример', 150, '100%')}}

+{{EmbedLiveSample('Пример', 150, '100%')}} -

Атрибуты

+## Атрибуты -

Глобальные атрибуты

+### Глобальные атрибуты - +- [Условные атрибуты обработки](/ru/docs/Web/SVG/Attribute#Conditional_processing_attributes) +- [Основные атрибуты](/ru/docs/Web/SVG/Attribute#Core_attributes) +- [Графические атрибуты событий](/ru/docs/Web/SVG/Attribute#Graphical_event_attributes) +- [Атрибуты представления](/ru/docs/Web/SVG/Attribute#Presentation_attributes) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("transform")}} +- {{SVGAttr("externalResourcesRequired")}} -

Специфические атрибуты

+### Специфические атрибуты -
    -
  • {{SVGAttr("х")}}
  • -
  • {{SVGAttr("у")}}
  • -
  • {{SVGAttr("dx")}}
  • -
  • {{SVGAttr("dy")}}
  • -
  • {{SVGAttr("rotate")}}
  • -
  • {{SVGAttr("textLength")}}
  • -
  • {{SVGAttr("text-anchor")}}
  • -
  • {{SVGAttr("lengthAdjust")}}
  • -
+- {{SVGAttr("х")}} +- {{SVGAttr("у")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} +- {{SVGAttr("rotate")}} +- {{SVGAttr("textLength")}} +- {{SVGAttr("text-anchor")}} +- {{SVGAttr("lengthAdjust")}} -

Интерфейс DOM

+## Интерфейс DOM -

Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.

+Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}. -

Примеры

+## Примеры -

Основы использования элемента <text>

+### Основы использования элемента \ -

SVG

+#### SVG -
-
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```html
+
+  
-
+ + - Привет, + Сахалин! + +``` -

Результат

+#### Результат -

{{EmbedLiveSample('SVG', 150, '100%')}}

+{{EmbedLiveSample('SVG', 150, '100%')}} -

Изменение направления написания текста.

+### Изменение направления написания текста. -

Направление написания SVG-текста можно сменить на обратное, применив трансформацию.

+Направление написания SVG-текста можно сменить на обратное, применив трансформацию. -

SVG

+#### SVG -
-
+```html
 
-<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
-  <style>
+
+  
+  
+    Пример ротации
+  SVG-текста.
+
+```
 
-
-
+#### Результат -

Результат

+{{EmbedLiveSample('Реверс', 200, '100%')}} -

{{EmbedLiveSample('Реверс', 200, '100%')}}

+### Цвет текста -

Цвет текста

+Цвет текста в SVG-элементе \ может быть изменён посредством свойства **fill**="\[color]" внутри элемента \. -

Цвет текста в SVG-элементе <text> может быть изменён посредством свойства fill="[color]" внутри элемента <text>.

+#### SVG -

SVG

- -
-
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
-    <style>
+```html
+
+    
-
+ + Цвет текста + SVG. + +``` -

Результат

+#### Результат -

{{EmbedLiveSample('SVG_3', 200, '100%')}}

+{{EmbedLiveSample('SVG_3', 200, '100%')}} -

Применение CSS-стилей к содержимому элемента <text>.

+### Применение CSS-стилей к содержимому элемента \. -

Содержимое SVG элемента <text> может быть стилизовано как обычный текст в HTML.

+Содержимое SVG элемента **\** может быть стилизовано как обычный текст в HTML. -

SVG

+#### SVG -
-
  <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
-    <style>
+```html
+  
+    
-
+ + Стиль текста + SVG. + +``` -

Результат

+#### Результат -

{{EmbedLiveSample('SVG_4', 200, '100%')}}

+{{EmbedLiveSample('SVG_4', 200, '100%')}} -

Спецификация

+## Спецификация {{Specifications}} -

Таблица составлена по информации из этого источника.

+Таблица составлена по информации из [этого источника](/ru/docs/Web/SVG/Compatibility_sources). + +## Совместимость с браузером -

Совместимость с браузером

-

{{Compat}}

+{{Compat}} -

Контекст использования

+## Контекст использования -

{{Svginfo}}

+{{Svginfo}} -

Связь

+## Связь -
    -
  • {{SVGElement("tref")}}
  • -
  • {{SVGElement("tspan")}}
  • -
  • {{SVGElement("altGlyph")}}
  • -
+- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} +- {{SVGElement("altGlyph")}} diff --git a/files/ru/web/svg/element/use/index.md b/files/ru/web/svg/element/use/index.md index 4d9ab2c2f6d339..527c7b012efaaf 100644 --- a/files/ru/web/svg/element/use/index.md +++ b/files/ru/web/svg/element/use/index.md @@ -9,119 +9,92 @@ tags: translation_of: Web/SVG/Element/use original_slug: Web/SVG/Элемент/use --- -
{{SVGRef}}
+{{SVGRef}} -

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то ещё.

+Элемент **``** берёт элементы из SVG-документа и дублирует их где-то ещё. -
- +```css hidden +html,body,svg { height:100% } +``` -
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
-  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
-  <use href="#myCircle" x="10" fill="blue"/>
-  <use href="#myCircle" x="20" fill="white" stroke="red"/>
-  <!--
+```html
+
+  
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('Exemple', 100, 100)}}
+
+Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент `use`, подобно элементам `