Question

我有以下SVG文件：

library(shiny)
library(shinyWidgets)
library(gridExtra)
library(png)
library(grid)

ui <- fluidPage(
  titlePanel("Compare"),
  sidebarLayout(
    sidebarPanel(
      pickerInput(inputId = "countyInput", label = "Filter county",
                  choices = c("County1", "County2", "County3", "County4", "County5"),
                  options = list(`actions-box` = TRUE,size = 10, `selected-text-format` = "count > 9"),
                  multiple = TRUE),
      checkboxGroupInput(inputId = "reasonInput", label = "Filter reason",
                         choices = c("reason1", "reason2", "reason3"))
    ),
    mainPanel(
      plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {

  output$plot <- renderPlot({
    filename <- normalizePath(file.path("<path>", paste0(input$countyInput, " ", input$reasonInput, ".png", sep = ""))) # you had one extra space before .png
    filename <- filename[file.exists(filename)]
    pngs = lapply(filename, readPNG)
    asGrobs = lapply(pngs, rasterGrob)
    p <- grid.arrange(grobs=asGrobs, nrow = 1)
    }, width = 1000)
}

shinyApp(ui = ui, server = server)

如果我直接在Firefox中查看该文件，则看起来不错：

但是，如果我使用class TweetsListener(StreamListener): def __init__(self, csocket): self.client_socket = csocket def on_data(self, data): try: msg = json.loads( data ) print( msg['text'].encode('utf-8') ) self.client_socket.send( msg['text'].encode('utf-8') ) return True except BaseException as e: print("Error on_data: %s" % str(e)) return True def on_error(self, status): print(status) return True def sendData(c_socket): auth = OAuthHandler(consumer_key, consumer_secret) auth.set_access_token(access_token, access_secret) twitter_stream = Stream(auth, TweetsListener(c_socket)) twitter_stream.filter(languages=["en"], track=['Microsoft','Amazon','Apple','Netflix'])标签将其包含在页面中，则它看起来像是被压缩了。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="19">
    <rect x="0" y="0" width="100%" height="100%" fill="black" />
    <text font-size="13" font-family="monospace" x="3" y="13" fill="#b2b2b2">Hello world</text>
</svg>

我想发生的事情是使黑色背景缩放以覆盖整个宽度，而文本保持不压缩。我已经试过可以想到的<img>和<html> <body> <img src="screenshot.svg" width="100%"> </body> </html>的所有排列，但是似乎没有一个具有预期的效果。 Chrome似乎可以正常显示。

Answer 1

我认为，这应该被标记为错误。似乎发生的情况是，无论是使用浏览器缩放功能还是由于DPI屏幕高而在预定义的缩放上，百分比或相对于视口的（vw，vh）值都保持相同的计算像素大小，而px其他单位值将与缩放值相乘。到目前为止，还好。

在Firefox中，<img>的witdth和height值似乎总是导致其内容的缩放比例不均匀，而不保留长宽比，即使对于通常根据SVG内容适合视口的SVG内容preserveAspectRatio条规则。

我看到了两种解决方法；两者都需要明确设置高度。请注意，我已经使用浏览器缩放功能在常规屏幕上进行了测试。我希望它在高DPI屏幕上也能正常工作。

通过使用包含SVG <svg>元素的内联<image>标签将HTML页面中的SVG图像嵌入：

<html>
  <body style="margin:0">
    <svg width="100%" height="19px">
      <image width="100%" height="100%" href="screenshot.svg" />
    </svg>
  </body>
</html>

使用SVG作为背景图片：

<html>
  <body style="margin:0">
    <div style="background:url(screenshot.svg) left no-repeat;width:100%;height:19px;">
  </body>
</html>

SVG在Firefox中使用<img/>标签进行不均匀缩放

1 个答案: