Llenar el formato SVG elemento de ruta de acceso con una imagen de fondo

Es posible establecer un background-image para un SVG <path> elemento?

Por ejemplo, si puedo configurar el elemento class="wall", el estilo CSS .wall {fill: red;} funciona, pero .wall{background-image: url(wall.jpg)} no, ni .wall {background-color: red;}.

Muestra cómo establecer la imagen de fondo para SVG texto, opcionalmente, por carácter: stackoverflow.com/a/10853878/405017
para aquellos que buscan un poco más en profundidad de verificación información de este artículo enlace

OriginalEl autor jbochi | 2010-09-25

2 Kommentare

  1. 220

    Usted puede hacer esto al hacer el fondo en un patrón:

    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
      </pattern>
    </defs>

    Ajustar la anchura y altura de acuerdo a su imagen, a continuación, hacer referencia a ella desde la ruta como esta:

    <path d="M5,50
             l0,100 l100,0 l0,-100 l-100,0
             M215,100
             a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
             M265,50
             l50,100 l-100,0 l50,-100
             z"
      fill="url(#img1)" />

    Ejemplo de trabajo

    muy bonito, hace este trabajo con imágenes en base64? en lugar de wall.jpg algo así como data:image/png;base64,iVBORw0KGgoAA como lo haría en condiciones normales de CSS?
    No sé, prueba y verás.
    He intentado y no funciona, pero yo tenía un duplicado del elemento de estilo. Por eliminación, funcionó muy bien;)
    Tengo una pregunta con respecto a su respuesta. El patrón se inicia en el global de coordenadas (0,0). Es posible que el patrón de uso del sistema de coordenadas local del objeto conectado? Quiero dibujar un rect en diferentes lugares de mi svg y lo que pasa es que el patrón se repite en el agujero de fondo y los objetos se utilizan como máscaras.
    Le sugiero que pregunte a su propia pregunta.

    OriginalEl autor robertc

  2. 12

    La respuesta por «robertc» svg – y esto es similar a lo que es utilizado por d3.js ruta de código. Me las arreglé para crear dinámicas de def para d3.js rutas por la aplicación de la siguiente.

    Me las arreglé para conseguir trabajo, definiéndolo como el siguiente

    chart.append("defs")
         .append('pattern')
         .attr('id', 'locked2')
         .attr('patternUnits', 'userSpaceOnUse')
         .attr('width', 4)
         .attr('height', 4)
         .append("image")
         .attr("xlink:href", "locked.png")
         .attr('width', 4)
         .attr('height', 4);
    es este d3.js ? si es así, usted debe mencionar la causa no está en la pregunta etiquetas
    Bueno, yo no escribí la pregunta? Hice una búsqueda por el código encontrado esta página. Se adaptó el proyecto de ley y que parecía trabajar para mí.
    Sé que ustedes no escribir la pregunta. El questionner pide svg soluciones y estás dumping código javascript. Ni siquiera es puro javascript para que se utiliza algún tipo de biblioteca. Yo sospecho que a d3. Pero cuando un usuario aleatorio entra en su respuesta, es ineficiente porque él no tiene idea de cómo usarlo. Estoy de votar este hacia abajo hasta que elaborar.
    La respuesta por robertc es puro SVG y no contiene d3.js código
    Es un derivado de un objeto de trazado que viene de d3.js. Sí es svg código. ¿Qué es con ustedes ser tan pequeña su código de trabajo que estaba bien hace 6 meses con 2 upvotes

    OriginalEl autor The Old County

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea