link - html set base url
El uso de la etiqueta base en una página que contiene elementos marcadores SVG no puede representar un marcador (7)
El elemento HTML <base> se usa para decir "resolver todas las URL relativas relativas no a esta página, sino a una nueva ubicación". En su caso, le ha dicho que lo resuelva en relación con el directorio con la página HTML.
El atributo SVG marker-mid="url(…)" es una Referencia FuncIRI . Cuando usas un valor como url(#foo) ese IRI relativo normalmente se resuelve en relación con la página actual, encontrando el elemento con el id de foo . Pero cuando usas <base> , cambias a donde se ve.
Para resolver este problema, use un mejor valor. Como su referencia base es el directorio actual, puede simplemente usar el nombre del archivo actual:
<line … marker-mid="url(this_page_name.html#arrow)" />
Si tiene un href <base> diferente, que lo que ha mostrado, como:
<base href="http://other.site.com/whee/" />
entonces necesitarás usar un href absoluto, por ejemplo
<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />
Me encontré con un problema al intentar usar elementos marcadores SVG en una visualización basada en SVG. Estoy agregando mis cambios a una aplicación web que incluye una etiqueta base en cada página, por lo que cualquier referencia a archivos CSS, javascript, etc. puede ser relativa.
Tengo un código de ejemplo a continuación que reproduce el problema. Hay un elemento de línea y un elemento marcador definido. El elemento marcador es referenciado por la línea en su atributo ''marcador-final'', a través de uri e id de marcador. Sin la etiqueta base, la flecha se muestra bien. Con la etiqueta base, no se muestra. La razón es porque la etiqueta base cambia la forma en que el navegador resuelve las URL ... incluso para la url basada en identificador simple especificada en el atributo marcador final de la línea.
¿Hay alguna manera de evitar este problema sin tener que quitar la etiqueta base?
Realmente no puedo eliminarlo porque el uso del mismo está bastante arraigado en el producto en el que estoy trabajando. Necesito apoyar Firefox, Chrome e IE9 + para mi aplicación web. Firefox y Chrome producen este problema. IE funciona bien (es decir, muestra el marcador de flecha).
<html>
<head>
<base href=".">
<style>
.link { stroke: #999; stroke-opacity: .6; }
marker#arrow { fill: black; }
</style>
</head>
<body>
<svg width="100%" height="100%">
<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>
Ember 2.7 reemplazará la etiqueta <base> con rootURL que debería solucionar este problema.
Mientras tanto, en mi d3 para degradados estoy usando lo siguiente:
.attr(''fill'', `url(${Ember.$(location).attr(''href'')}#my-gradient)`);
Si no lo hace, el elemento al que se dirige parecerá transparente.
En Angular 2+, puede inyectar la ruta base en su módulo de aplicación en lugar de usar la etiqueta <base>. Esto resolvió el problema en Edge y Firefox para mí.
import { APP_BASE_HREF } from ''@angular/common'';
@NgModule({
providers: [{
provide: APP_BASE_HREF,
useValue: ''/''
}]
})
export class AppModule { }
https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
En Windows actualmente (04-2017) todos los navegadores se comportan como se espera ( mask = url ("# svgmask") ). Chrome, Firefox, incluso IE 11 !! - pero Edge aparece con un error.
Por lo tanto, para Microsoft Edge, aún debe indicar la ruta absoluta ( mask = "url (ruta / a / este-documento.htm # svgmask)" ) para sus identificaciones de máscara cuando está utilizando una etiqueta base en su documento:
<svg viewBox="0 0 600 600" >
<defs>
<mask id="svgmask">
<image width="100%" height="100%" xlink:href="path/to/mask.svg" ></image>
</mask>
</defs>
<image mask="url(path/to/this-document.htm#svgmask)" width="600" height="600" xlink:href="path/to/image.jpg"></image>
</svg>
En el contexto de una aplicación web enriquecida, como una basada en Angular, donde debe establecer la etiqueta <base> para que funcione la navegación de estilo HTML5, puede resultar complicado tratar de solucionarlo de forma permanente.
En mi caso, la aplicación en la que estaba trabajando mostraba un generador de diagramas interactivos basado en SVG que cambiaría la url de la aplicación a medida que seleccionaba elementos en ella.
Lo que hice fue agregar un controlador de eventos global que arreglaría todos los estilos url(#...) línea en cualquier elemento <path> que se encuentre en la página:
$rootScope.$on ''fixSVGReference'', ->
$(''path'').each ->
$path = $ this
if (style = $path.attr ''style'')?
$path.attr ''style'', style.replace /url/([^)#]*#/g, "url(#{location.href}/#"
A continuación, active este controlador en lugares clave, como cuando cambia el estado de la aplicación (estoy usando ui-router )
$rootScope.$on ''$stateChangeSuccess'', ->
$timeout (-> $rootScope.$emit ''fixSVGReference''), 5
Además de en cualquier lugar donde sé que habría rutas nuevas / actualizadas como estas. Aquí, el $timeout es para tener en cuenta el hecho de que los nodos DOM realmente se cambian de forma asincrónica en algún momento después de que se desencadena el evento $stateChangeSuccess .
Prueba con javascript:
<line id="something" />
Con nativo:
document.getElementById(''something'').setAttribute(''marker-mid'', ''url('' + location.href + ''#arrow)'');
Con jQuery:
$(''#something'').attr(''marker-mid'', ''url('' + location.href + ''#arrow)'');
Simplemente funciona.
Si no desea modificar / animar el svg, existe una solución más simple que cambiar el parámetro url() .
Incluye el svg como imagen:
<img src="yourpath/image.svg">