svg 带有闪亮的可点击链接 - 不可点击答案

【问题标题】：svg with clickable links in shiny - not clickablesvg 带有闪亮的可点击链接 - 不可点击
【发布时间】：2016-05-09 17:20:50
【问题描述】：

我正在使用 graphviz dot 在 Shiny 中生成 svg 文件。他们有可点击的链接。我就是这样做的。

imageOutput("imagegraph",width = "100%", height = "auto",inline=F)
...
output$imagegraph <- renderImage({
...
list(src = svgGeneratedOnTheFlyByGraphviz.svg,
     align="top",
     width=wid,
     contentType="text/svg+xml"
     )
)

问题在于，虽然通过“在新选项卡中打开图像”查看的实际图像确实具有可点击的链接，但在 Shiny 生成的 div 中，没有任何东西是可点击的。文本也是不可选择的，这很奇怪。（无法发布完整的可重现示例，因为使用 Graphviz 生成 .svg 的代码非常繁琐，并且有很多依赖项。）我尝试摆弄包括 contentType 在内的所有参数，但没有任何帮助。

【问题讨论】：

标签： r svg shiny

【解决方案1】：

我认为链接不可点击，因为您正在使用img 标签来呈现您的svg。这个StackOverflow post 说你可以通过使用object 标签来克服这个限制。但是，我认为使用svg 标签会提供最好的结果。这是一个最小的例子。根据您的问题，您可以将动态生成的 svg 包装在 HTML(...) 中。

library(shiny)
library(htmltools)

# see Shiny docs
#  http://shiny.rstudio.com/reference/shiny/latest/htmlOutput.html
#  http://shiny.rstudio.com/reference/shiny/latest/renderUI.html
ui <- list(
  uiOutput("svgout")
)

server <- function(input, output, session){
  output$svgout <- renderUI({
    HTML(
"
<svg>
  <a xlink:href = 'https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle'>
    <circle cx='60' cy='60' r='50'/>
  </a>
</svg>
"      
    )
  })
}

shinyApp(ui, server)

【讨论】：

谢谢 - 这行得通！我使用对象标签获得了更好的结果，如下所示：我必须记住将 svg 放在 www/ 文件夹中。
你在使用svglitegithub.com/hadley/svglite吗？如果没有，可能值得一试。