javascript - imagenes - como insertar una imagen de fondo en html
Imagen de fondo de tamaño completo a la ruta SVG (2)
He estado usando Raphael JS (... es genial). Solo quería entender cómo puedo agregar una background-image background-size (portada) a mi ruta SVG que creé con Raphael. ¿Es esto posible?
Lo que he intentado:
He intentado agregar una clase, pero la agrega al SVG (padre de la ruta), así que también probé la
svg path {//background properties, including the image I want to include;}También he investigado los patrones, esto funcionó, pero mi salida no tenía las propiedades de fondo que quería, ya que no estaba seguro de cómo configurarlas con los patrones (
background-image: //;ybackground-size: //;).
Código actual (Rafael)
function myFunction() {
var paper = Raphael("drama", 400,400);
var c = paper.path("M24,48 L313,12L342,174L98,280Z").attr({fill: "url(''../imgs/screen.png'')", stroke: "none"});
}
Salida de Raphael actual
<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" height="1737" width="2880" patternTransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../imgs/screen.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="2880" height="1737"></image>
</pattern>
</defs>
<path fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)" stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
¿Es una opción agregar un contenedor alrededor del SVG?
Si es así, podría usar el truco de relación de aspecto pensado originalmente para los videos: http://alistapart.com/article/creating-intrinsic-ratios-for-video
Aquí hay otro artículo al respecto: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Debería ser posible que el SVG mantenga la relación de aspecto y usted podría agregar una imagen de fondo que se ajuste perfectamente al contenedor principal.
Esto es bastante raro, pero lo intentaría. =)
Ajustar el ancho y la altura de su pattern y su etiqueta de image debería hacerlo.
Puede establecer un ancho y alto basados en%, que son relativos al ancho y alto del SVG (no su ruta).
La siguiente demostración utiliza una imagen cuadrada de 500 * 500 píxeles que se redimensiona al 80% del ancho y la altura de su SVG (= 320 * 320 píxeles).
El violín:
http://jsfiddle.net/4fo0rnfd/2/
El código SVG:
<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%" patternTransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="//nl.gravatar.com/userimage/24668445/02be1fd7ba95a756c1f29e61738bd6a5.png?size=500" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="80%" height="80%"></image>
</pattern>
</defs>
<path stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)"></path>
</svg>
