From 3c104650ad548685155f19a10c1c4ff62d42ff14 Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 9 Nov 2021 00:50:07 +0000 Subject: [CRON] sync translated content --- files/fr/web/api/node/baseuri/index.html | 120 +++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/fr/web/api/node/baseuri/index.html (limited to 'files/fr/web/api') diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html new file mode 100644 index 0000000000..69f5b4e1e9 --- /dev/null +++ b/files/fr/web/api/node/baseuri/index.html @@ -0,0 +1,120 @@ +--- +title: xml:base +slug: Web/API/Node/baseURI +tags: + - Introduction + - SVG + - URL + - XML + - base +translation_of: Web/XML/xml:base +original_slug: Web/XML/xml:base +--- +

xml:base est comme  L'élément pour l'URL de base du document en HTML mais peut spécifier l'URI de base par élément ainsi que pour le document entier.

+ +

L'URL de base d'un élément peut être interrogé à partir d'un script en utilisant Node.baseURI.

+ +
+

L'URI de base d'un élément est :

+ +
    +
  1. +

    l'URI de base spécifiée par un attribut xml:base sur l'élément, s'il en existe un, sinon

    +
    2. +
  2. +

    l'URI de base de l'élément du parent contenu dans l'entité du document ou une entité externe, s'il en existe, sinon

    +
    3. +
  3. +

    l'URI de base de l'entité du document ou d'une entité externe contenant l'élément.

    +
    4. +
+
+ +

Malheureusement, la prise en charge du clignotement a été supprimée (Chrome et Opera) en 2015.

+ +
    +
  1. https://bugs.chromium.org/p/chromium/issues/detail?id=341854
    2. +
  2. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZvArHAXyAHM
    3. +
+ +

Cas d'utilisation

+ +

Si vous avez un SVG en ligne, vous utilisez des icônes qui doivent fonctionner dans un document avec un HTML BaseElement , vous pouvez réinitialiser l'URI sur votre "sprite" d'icône en réglant le xml:base.

+ +

 

+ +
<html>
+  <head>
+  <base href="https://mydomain.com">
+  <style>
+  .link { stroke: #999; stroke-opacity: .6; }
+  marker#arrow { fill: black; }
+  </style>
+</head>
+<body>
+  <svg width="100%" height="100%" xml:base="">
+    <defs>
+      <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
+        <path d="M0,-5L10,0L0,5"></path>
+      </marker>
+    </defs>
+    <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
+  </svg>
+</body>
+</html>
+ +

 

+ +

Imaginez un SVG avec des références de polices de caractères. Par exemple :

+ +
<svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629"
+  width="909" height="1286" viewBox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<style type="text/css"><![CDATA[
+
+.s9_999{
+font-size: 9.17px;
+font-family: ZapfDingbats_ghr;
+fill: #161615;
+}
+]]></style>
+
+  <text
+    x="647"
+    y="412"
+    dx="0"
+    class="s9_999"
+  >r</text>
+
+<style type="text/css" ><![CDATA[
+
+@font-face {
+    font-family: ZapfDingbats_ghr;
+    src: url("fonts/ZapfDingbats_ghr.woff") format("woff");
+}
+
+]]></style>
+
+</svg>
+
+ +

La définition du xml:base sur l'élément SVG signifie que vous pouvez intégrer le SVG et ainsi contourner le problème CORS sans modifier l'URI de base pour l'ensemble de votre document..

+ +

 

+ +

Les solutions de contournement

+ + + +

Spécification

+ + + +

 

+ +

 

-- cgit v1.2.3-54-g00ecf