Is it possible to edit an svg:image styles in the browser? (using D3)

captainclam

I'm using D3 to load existing SVG images onto my SVG.

If I were to create my own elements, I can easily edit their stroke/fill, etc.

However with image elements, I do not seem to be able to edit them. For example something like this:

<image height="32" width="32" xlink:href="some.svg" x="10" y="20"></image>

Attempting to change its properties with D3 has no effect at all. For example if I add it as such:

svg.append('svg:image')
  .attr('height', SYMBOL_SIZE)
  .attr('width', SYMBOL_SIZE)
  .attr('xlink:href', "some.svg")
  .style('stroke', 'blue')
  .style('fill', 'blue')
  .style('cursor', 'move')

It accepts my x, y, height, width and cursor attrs/styles, but completely ignores the fill/stroke. I also can't add a border.

Is there any way to work around this?

captainclam

I was able to solve this issue by importing the image I needed using d3.xml()

This example grabs tux and gives him some nice pink lipstick.

  d3.xml "http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg", "image/svg+xml", (xml) ->
    importedNode = document.importNode(xml.documentElement, true)
    svg.node().appendChild(importedNode.cloneNode(true))
    svg.selectAll('#path119').style fill: 'pink', stroke: 'red'
    svg.selectAll('#path120').style fill: 'red', stroke: 'pink'

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Is it possible to edit an svg:image styles in the browser? (using D3)

From Dev

Background image to SVG choropleth map using D3

From Dev

Using D3 to fill an svg with a background image

From Dev

Is it possible to edit Textboxes in a browser using VIM or a VIM-Style-Editor?

From Dev

Is it possible to get the XML of an SVG image using JavaScript?

From Java

Is it possible to see which srcset image a browser is using with browser developer tools

From Dev

Modifying an SVG in HTML using d3

From Dev

Using SVG attributes in variables in d3

From Dev

Modifying an SVG in HTML using d3

From Dev

Is it possible to calculate the color balance of an SVG image using JavaScript?

From Dev

Is it possible to open and edit an Excel file on web browser?

From Dev

Save D3 svg as a high quality image

From Dev

Add drop-shadow to svg image in D3

From Dev

Save D3 svg as a high quality image - viewport case

From Dev

Convert d3 chart (svg) to an image and display it

From Dev

d3: svg image in zoom circle packing

From Dev

Save D3 svg as a high quality image - viewport case

From Dev

Download SVG EDIT for using it in mediawiki

From Dev

Edit SVG font using Inkscape

From Dev

How to center a text on a svg image using d3.js?

From Dev

Selecting SVG items using D3 DataMaps?

From Dev

svg rendering order of lines and shapes when using d3

From Dev

SVG filter using d3 js not working in IE

From Dev

Save svg to disk as png image - browser discrepancy

From Dev

SVG embedded image displays in Browser ONLY

From Dev

Is it possible to change svg (included as <img> element) styles from external css?

From Dev

In browser conversion of svg to png image (cross browser including IE)

From Dev

Unable to edit SVG using Batik in Java?

From Dev

How to blur an image on mouseover using D3?

Related Related

  1. 1

    Is it possible to edit an svg:image styles in the browser? (using D3)

  2. 2

    Background image to SVG choropleth map using D3

  3. 3

    Using D3 to fill an svg with a background image

  4. 4

    Is it possible to edit Textboxes in a browser using VIM or a VIM-Style-Editor?

  5. 5

    Is it possible to get the XML of an SVG image using JavaScript?

  6. 6

    Is it possible to see which srcset image a browser is using with browser developer tools

  7. 7

    Modifying an SVG in HTML using d3

  8. 8

    Using SVG attributes in variables in d3

  9. 9

    Modifying an SVG in HTML using d3

  10. 10

    Is it possible to calculate the color balance of an SVG image using JavaScript?

  11. 11

    Is it possible to open and edit an Excel file on web browser?

  12. 12

    Save D3 svg as a high quality image

  13. 13

    Add drop-shadow to svg image in D3

  14. 14

    Save D3 svg as a high quality image - viewport case

  15. 15

    Convert d3 chart (svg) to an image and display it

  16. 16

    d3: svg image in zoom circle packing

  17. 17

    Save D3 svg as a high quality image - viewport case

  18. 18

    Download SVG EDIT for using it in mediawiki

  19. 19

    Edit SVG font using Inkscape

  20. 20

    How to center a text on a svg image using d3.js?

  21. 21

    Selecting SVG items using D3 DataMaps?

  22. 22

    svg rendering order of lines and shapes when using d3

  23. 23

    SVG filter using d3 js not working in IE

  24. 24

    Save svg to disk as png image - browser discrepancy

  25. 25

    SVG embedded image displays in Browser ONLY

  26. 26

    Is it possible to change svg (included as <img> element) styles from external css?

  27. 27

    In browser conversion of svg to png image (cross browser including IE)

  28. 28

    Unable to edit SVG using Batik in Java?

  29. 29

    How to blur an image on mouseover using D3?

HotTag

Archive