EmmaSchwarz / computational-dostoevsky

1 stars 0 forks source link

SVG Links #32

Closed EmmaSchwarz closed 4 years ago

EmmaSchwarz commented 4 years ago

Hello, I've been trying to get links associated with an svg image to open; however, when I try to edit the target of the href in the xslt file that contains the svg transformation, the changes are not preserved when the svg is used on the site. When the links are clicked, they link to the correct chapter, but the chapter is opened on the results page, where the bubble chart is located, replacing the bubble chart with the chapter's text in the window that previously contained the chart. How could I fix this? The links work, in a way, they just open incorrectly. Ideally, the links would link to the embedded chapters in the text page, in a separate window. I have already tried setting the target attribute to blank, as well as xlink attributes that give the command to open a separate window/not override the chart with the linked text.

Should the svg be included in the html in another way? I'm asking as the copy of the svg file I have on my local machine works, opening the links and maintaining the chart image on the site, but the svg image on the site overrides the image with the text page when the links are clicked. I have also tried including the svg as both an image, embed, and object container.

djbpitt commented 4 years ago

@EmmaSchwarz I created results-test.xhtml and images/bubble-test.svg, and included the SVG using an SSI, instead of an <img> or <object> element, and the links open in a new tab when I click on them. I think this is the behavior you wanted. I had never run into this problem before because I always include SVG with an SSI, rather than with an <img> or other HTML element.

I had to remove the XML declaration from the beginning of the SVG file because the XML declaration can appear only as the first line of an XHTML file, and if I hadn’t removed it from the SVG, it would have been inserted into the middle of the XHTML after the include was processed. You can regenerate the SVG without the XML declaration (that is, you don’t have to [= don’t want to] remove it manually) with the @omit-xml-declaration attribute on <xsl:output>.

I think the reason the links don’t work with <img> may be because images are not expected to contain DOM objects, so although the browser renders the image, it doesn’t expose the usual DOM properties. That’s just a guess (I didn’t do any research—sorry!), but it is consistent with the way the links do work with an SSI, since with an SSI, there is no difference, once the content gets to the browser, between content supplied with an SSI and content that was there in raw angle brackets to begin with.

I may be off the grid for the rest of this evening, but if you run into any other problems, please open an issue and I’ll check in the morning. You may also want to tag the other instructors within the issue, in case one of them is able to get to it before I do.

EmmaSchwarz commented 4 years ago

Thank you! That worked. The only thing I changed was the starting x position of the chart title, because it was now cut off (at least for me).