Question

为什么SVG在画布中无法正确缩放（它全部像素化且模糊）？我做错了什么？

我想要的只是SVG图像，无论画布大小如何都能保持它的宽高比，并且不会让它变得模糊。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#screen {
  display: block;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <title>Game</title>
</head>

<body>
  <canvas id="screen"></canvas>
  <script type="text/javascript" src="js/game.js"></script>
</body>

</html>

First Data frame Name: sampel_sort
name                             id         supplier   usage
ABC                             10000079    811121     1
DEF                             10000182    541513     4
Supplier C                      10000484    531110     1
Supplier D                      10000523    541320     1
Supplier E                      10000592    524210     1
Supplier F                      10012711    237110     1

Second data frame Name: MBE
  id    State   total   CATEGORY
10000070    MD       5       MBE
10000182    PR       14      MBE
10000484    TX       1       MBE
10000526    MI       3       MBE
10000592    FL       1       MBE
10000680    ID       14      MBE

Answer 1

您的问题不在于SVG，而在于画布。

画布的默认大小为300×150。首先，运行的是脚本，它创建画布上下文，格式为300×150.然后CSS出现，并将canvas元素在每个方向上缩放到100％。上下文仍然是300×150。这使得每个像素占用超过1个像素区域。您需要确保您的脚本在CSS之后运行，或者您需要使用javascript来调整画布大小。

Answer 2

我认为您可以将SVG置于div内，然后模糊div，这样效果会相同

https://jsfiddle.net/moongod101/q3qh78xd/

画布中的模糊svg

2 个答案: