html5-canvas 相关问题

我正在尝试将我的徽标添加到网页的标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。这是我的 html 文件我正在尝试将我的徽标添加到网页标题中，但当我检查较小屏幕上的外观时，我不断看到 svg 周围有这个边距。这是我的 html 文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Restaurant</title> </head> <body> <header> <div id="logo"> <img src="img/logo.svg" alt=""> <p>RESTAURANT</p> </div> </header> </body> </html>type here 这是我的 style.css 文件 *{ margin: 0; padding: 0; /* border: 1px solid red; */ } body{ background-color: black; color: white; } #logo img{ background: white; } #logo p{ font-size: 16.2; font-family: sans-serif; font-weight: bold; margin-left: 35px; letter-spacing: 0.2px; } 这是 logo.svg 该文件包含我想要包含在标题中的徽标 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg> 在大屏幕上看起来不错但在较小的屏幕上，svg 周围有这个边距我尝试裁剪 svg 但没有成功我能想到的几乎所有其他解决方案都失败了您需要做的就是更改 svg 代码上的 viewBox="0 0 241.000000 27.000000" 和 transform="translate(0.000000,27.000000)" 部分，它只是一个额外的空间，因此如上所述减小大小将解决该问题我已经编辑了你的 svg 代码，只需将其替换为下面的代码： <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg>

html css svg css-selectors html5-canvas

回答 1 投票 0

如何从平板电脑获取压力以与 HTML5-Canvas 一起使用

我想用我的平板电脑（HP Elitebook）在网页中绘图，并且我想创建一个可以在网络浏览器中使用的“画图”，如果可能的话使用 HTML5-Canvas。我是平板电脑编程新手......

html5-canvas tablet-pc pressure

回答 3 投票 0

如何移动nextjs useState中创建的fabricjs对象？

当我在 useEffect() 中创建织物画布时，它不允许我移动添加的图像，但如果我在其他地方创建它（受 useState 异步问题的影响），它确实允许我正常移动。 ...

javascript reactjs next.js html5-canvas fabricjs

回答 1 投票 0

当我在 HTML 画布中添加新的弹力球时，如何阻止我的球被移动到随机位置？

我目前有一个程序，当您点击“添加球”按钮时，就会创建一个新球，并且它们会从墙壁和其他球上反弹。然而，假设您已经有另外两个平衡...

javascript html5-canvas

回答 1 投票 0

为什么div里面的canvas有垂直偏移？

为什么div里面的canvas有垂直偏移？ Web 检查器不显示 div 和画布的任何边距或填充。 .外层{ 高度：100px；宽度：200px；边框：1px实线； } .内部{

html css html5-canvas

回答 1 投票 0

如何在 HTML5 画布中剪切部分文本？

我有一个在 HTML5 画布上绘制的文本。如何剪切或隐藏行左侧的部分文本？在此示例中，单词“HELLO”的部分被剪裁到红色的左侧...

html html5-canvas

回答 4 投票 0

canvas html5 中的事件模糊

当我在此画布上失去焦点时，我正在尝试将事件监听器添加到我的画布中。我有两块画布：在第一个画布（左侧）中，我画了一个签名，当将焦点更改到右侧画布时，我

javascript html5-canvas

回答 1 投票 0

如何将一个网页上的画布复制到另一个网页

我正在尝试从网页获取画布并将其显示在其他地方。画布本身无法通过 URL 获取，我获取网页并从那里抓取画布。话虽这么说，当

javascript html html5-canvas fetch

回答 1 投票 0

HTML 标题标签

我们可以在网页中使用多个标签吗？如果不是那么为什么不呢？不过，我在网页中使用多个标签时是否有任何警告或任何问题。这是一个好的做法还是... 我们可以在网页中使用多个 <h1> 标签吗？如果没有那为什么不呢？我在网页中使用多个 <h1> 标签是否有任何警告或任何问题。在网页中使用多个标题标签是一个好习惯还是好主意？结构正确吗？我正在学习 html，我了解到从 h1 到 h6 有六个 hading 标签，所以我认为使用相同语义的多个标题标签是可能的或者是一个很好的做法。我正在尝试在网页中添加多个具有相同语义的标题标签。它工作正常。我想知道在网页中使用多个相同语义的标题标签是一个好习惯吗？添加多个标签是完全可以的。但是，您可能希望确保每个标签位于文档中的单独部分/主题中（以实现可访问性、可维护性和 SEO）。

html web html5-canvas web-development-server mdns

回答 1 投票 0

Fabric.js 使用控制处理程序进行图像操作，当图像被裁剪和缩放时，下一个裁剪操作不会应用于之前的状态

在给定的fabricjs代码中，我正在使用图像控制处理程序开发裁剪和缩放功能。当图像第一次缩放然后裁剪时，在这种情况下它工作正常。然后

javascript canvas html5-canvas fabricjs

回答 1 投票 0

如何通过mousemove事件读取React-Leaflet中ImageOverlay的像素值？

我试图在每个鼠标移动事件上读取 React-Leaflet 中 ImageOverlay 的像素值。我想使用 canvas API 读取像素值并在粘性工具提示中显示 RGB 值。可以...

reactjs html5-canvas pixel-manipulation react-leaflet-v4

回答 1 投票 0

严格模式下的ImageData数据分配

假设我有这样的 PoC 代码片段，用于处理画布原始像素数据（功能（）{ '使用严格'； var img = document.createElement("canvas").getContext("2d").getImageData(0, 0, 1, 1); ...