files/fr/web/api/node/baseuri/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

---
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
---
<p>xml:base est comme  <a href="/fr/docs/Web/HTML/Element/base">L'élément pour l'URL de base du document en HTML</a> mais peut spécifier l'URI de base par élément ainsi que pour le document entier.</p>

<p>L'URL de base d'un élément peut être interrogé à partir d'un script en utilisant <a href="/fr/docs/Web/API/Node/baseURI">Node.baseURI</a>.</p>

<blockquote>
<p>L'URI de base d'un élément est :</p>

<ol>
 <li>
  <p>l'URI de base spécifiée par un attribut <code>xml:base</code> sur l'élément, s'il en existe un, sinon</p>
 </li>
 <li>
  <p>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</p>
 </li>
 <li>
  <p>l'URI de base de l'entité du document ou d'une entité externe contenant l'élément.</p>
 </li>
</ol>
</blockquote>

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

<ol>
 <li>https://bugs.chromium.org/p/chromium/issues/detail?id=341854</li>
 <li>https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZvArHAXyAHM</li>
</ol>

<h2 id="Cas_d'utilisation">Cas d'utilisation</h2>

<p>Si vous avez un SVG en ligne, vous utilisez des icônes qui doivent fonctionner dans un document avec un <a href="/fr/docs/Web/HTML/Element/base">HTML BaseElement</a> , vous pouvez réinitialiser l'URI sur votre "sprite" d'icône en réglant le xml:base.</p>


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


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

<pre class="brush: xml">&lt;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"&gt;
&lt;defs&gt;
&lt;style type="text/css"&gt;&lt;![CDATA[

.s9_999{
font-size: 9.17px;
font-family: ZapfDingbats_ghr;
fill: #161615;
}
]]&gt;&lt;/style&gt;

  &lt;text
    x="647"
    y="412"
    dx="0"
    class="s9_999"
  &gt;r&lt;/text&gt;

&lt;style type="text/css" &gt;&lt;![CDATA[

@font-face {
    font-family: ZapfDingbats_ghr;
    src: url("fonts/ZapfDingbats_ghr.woff") format("woff");
}

]]&gt;&lt;/style&gt;

&lt;/svg&gt;
</pre>

<p>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..</p>


<h2>Les solutions de contournement</h2>

<ul>
 <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/XML/base_function">prise en charge de xml:base dans les anciens navigateurs</a></li>
 <li><a href="https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2">https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2</a></li>
</ul>

<h2>Spécification</h2>

<ul>
 <li>{{spec("https://www.w3.org/TR/xmlbase/", "XML Base (Second Edition)","REC")}}</li>
</ul>