We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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. 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. l'URI de base de l'entité du document ou d'une entité externe contenant l'élément.

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. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZvArHAXyAHM

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

 

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16
Dernière mise à jour par : loella16,