svg 相关问题

如何在 javascript 中将 SVG 旋转 45 度

所以我有一个 SVG 的 url，它是从生成 QR 代码的 API 中获得的，而 SVG 是 QR 代码的图像。我似乎无法找出将这个 SVG 旋转 45 度的最佳方法，我已经尝试过

使 SVG 适合 100vw

我正在尝试使这个 SVG 适合 100vw，但我似乎无法实现它。 我尝试添加一个类并使用宽度：100vw。 我尝试添加 viewBox="0 0 900 1135" （并且注意...

纬度、经度和 SVG

我正在尝试使用 SVG 来表示机场及其空域。我已经三次检查了坐标，但 y 轴及其转换方式看起来仍然有问题。当你...

基于SVG的文本输入字段

除了http://www.carto.net/papers/svg/gui/textbox/之外，还有人见过文本输入字段的任何javascript实现吗？

Django模板svg渲染问题

我有一个 django html 模板，其中包含此 svg 元素： 我有一个 django html 模板，其中包含此 svg 元素： <svg id="tower_layout" width="400" height="400" style="border: 1px solid black;" xmlns="http://www.w3.org/2000/svg"> <rect width="398" height="398" x="1" y="1" fill="#e4e4e7" /> <text x="200" y="20" stroke="black" font-size="15" text-anchor="middle">Tower Diagram</text> {% for i in val_range %} {% if i > 0 %} <line x1="{{ val[i-1].x_d }}" y1="{{ val[i-1].y_d }}" x2="{{ val[i].x_d }}" y2="{{ val[i].y_d }}" stroke-width="1" stroke="black" /> {% endif %} {% endfor %} 当我尝试渲染模板时，收到“TemplateSyntaxError：无法解析其余部分：‘val[i-1].x_d’中的‘[i-1].x_d’”。我已暂停模板并使用调试控制台验证所有 4 个 val 项目均可用。我对这个错误的原因感到困惑。 如有任何建议，我们将不胜感激！ 你不能在 Django 模板中使用它： {{ val[i-1].x_d }} 您需要创建一个自定义标签或过滤器来访问 val 内的值，我相信这是一些字典。 参见 https://docs.djangoproject.com/en/5.0/howto/custom-template-tags/

每次清除缓存后 Favico 才会显示

我有一个页面，其中index.html有一个head标签，其中包含一个带有favico.svg的链接标签： 我有一个页面，其中index.html有一个head标签，其中包含一个带有favico.svg的链接标签： <link rel="manifest" href="./manifest.json"> <link rel="shortcut icon" type=“image/x-icon” href="./images/Site_Favicon.svg"> <link rel="icon" type=“image/x-icon” href="./images/Site_Favicon.svg"> 在manifest.json中我有： "icons": [ { "src": "./images/Site_Favicon.svg", "sizes": "any", "type": "image/svg+xml" } ], SVG 文件位于公共文件夹的图像子文件夹中。 每次加载页面时，图标都会正常加载，但每次单击链接时，都会打开一个新选项卡（同一网站，只是不同的页面），图标将无法加载。 如果我清除网站 cookie 和缓存并重新加载新选项卡，则会显示网站图标。如果我关闭新选项卡，然后重新打开它，图标就会消失，直到我再次清除所有内容。 因此，当我在新选项卡中打开主页之外的链接时，我必须清除站点 cookie 和缓存才能每次显示图标。 如果您在本地开发，则硬刷新即可。如果它位于执行大量缓存的服务器上，您可以通过将参数传递给 href 来欺骗浏览器，如下所示 <link rel="icon" type=“image/x-icon” href="./images/Site_Favicon.svg?v-2"> 。浏览器会认为这是一个新文件。

将一个 SVG 包含在另一个中

是否可以将一个 SVG 包含在另一个 SVG 中而不产生光栅化效果？我试过这个 是否可以将一个 SVG 包含在另一个 而不光栅化效果中？我试过这个 <svg version="1.2" width="600.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="655.813953488" width="600.0" x="0" xlink:href="A.svg" y="0"/> <image height="740.540540541" width="600.0" x="0" xlink:href="B.svg" y="655.813953488"/> </svg> 这会渲染 A.svg 和 B.svg 的合成图像，但它们会失去矢量图形属性并变成位图（在 chrome, inkscape, inkview 和 eog 中测试）。生成的 svg 不会显示在网络浏览器内，因此外部 javascript 调用不是一个选项。如何在不复制、粘贴和保留矢量化的情况下将一个 svg“包含”在另一个 svg 中？ 在 chrome 中放大合成图像的结果： （单独使用A.svg不存在效果） 编辑：这是我用来测试的确切图像： A.svg <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129pt" height="141pt" viewBox="0 0 129 141" version="1.2"> <defs> <g> <symbol overflow="visible" id="glyph0-0"> <path style="stroke:none;" d="M 133.296875 0 L 133.296875 -5.1875 C 122.734375 -5.1875 119.15625 -5.1875 116.5625 -12.546875 L 72.328125 -137.6875 C 71.328125 -140.265625 70.9375 -140.875 68.9375 -140.875 C 66.953125 -140.875 66.546875 -140.265625 65.546875 -137.6875 L 23.3125 -18.125 C 19.53125 -7.375 11.5625 -5.1875 4.578125 -5.1875 L 4.578125 0 C 8.171875 -0.40625 16.140625 -0.40625 19.921875 -0.40625 C 24.90625 -0.40625 32.875 -0.40625 37.65625 0 L 37.65625 -5.1875 C 28.296875 -5.578125 26.90625 -11.953125 26.90625 -14.34375 C 26.90625 -16.140625 27.296875 -17.140625 27.703125 -18.328125 L 38.25 -48.015625 L 90.453125 -48.015625 L 102.421875 -14.140625 C 103.40625 -11.75 103.40625 -11.359375 103.40625 -10.5625 C 103.40625 -5.1875 94.84375 -5.1875 91.0625 -5.1875 L 91.0625 0 C 96.828125 -0.40625 107.203125 -0.40625 113.375 -0.40625 C 118.546875 -0.40625 128.515625 -0.40625 133.296875 0 Z M 88.671875 -53.203125 L 40.046875 -53.203125 L 64.359375 -121.734375 Z M 88.671875 -53.203125 "/> </symbol> </g> </defs> <g id="surface1"> <g style="fill:rgb(0%,0%,0%);fill-opacity:1;"> <use xlink:href="#glyph0-0" x="-4.59" y="140.87"/> </g> </g> </svg> B.svg <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111pt" height="137pt" viewBox="0 0 111 137" version="1.2"> <defs> <g> <symbol overflow="visible" id="glyph0-0"> <path style="stroke:none;" d="M 120.9375 -36.265625 C 120.9375 -54.203125 104.609375 -69.53125 83.28125 -70.9375 C 102.421875 -74.71875 115.765625 -87.46875 115.765625 -102.609375 C 115.765625 -119.15625 99.421875 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 78.90625 0 C 104.40625 0 120.9375 -18.125 120.9375 -36.265625 Z M 101.21875 -102.609375 C 101.21875 -87.46875 89.0625 -72.328125 67.546875 -72.328125 L 38.859375 -72.328125 L 38.859375 -123.140625 C 38.859375 -129.90625 39.25 -130.90625 47.21875 -130.90625 L 72.71875 -130.90625 C 92.453125 -130.90625 101.21875 -114.96875 101.21875 -102.609375 Z M 106.203125 -36.46875 C 106.203125 -21.921875 94.84375 -5.1875 73.125 -5.1875 L 47.21875 -5.1875 C 39.25 -5.1875 38.859375 -6.171875 38.859375 -12.953125 L 38.859375 -69.140625 L 75.71875 -69.140625 C 96.234375 -69.140625 106.203125 -51.015625 106.203125 -36.46875 Z M 106.203125 -36.46875 "/> </symbol> </g> </defs> <g id="surface1"> <g style="fill:rgb(0%,0%,0%);fill-opacity:1;"> <use xlink:href="#glyph0-0" x="-10.361" y="136.082"/> </g> </g> </svg> 要维护矢量图形属性，请考虑直接在文本编辑器中编辑 SVG 文件。你会需要 找到元数据部分的末尾（通常用 /metadata 标记），然后 在元数据部分之后的元素中插入第二个 SVG 内容。 此方法允许您将一个 SVG 包含在另一个 SVG 中，同时保留矢量化。请记住，这种方法更适合独立的 SVG 文件，而不是直接在 Web 浏览器中渲染。

如何删除 SVG 元素周围的间距？

我有一个 SVG 元素作为我的徽标，但是，徽标周围有填充，看起来约为 30 像素。我尝试调整徽标的大小，但是当它调整大小时，它会增加我的导航栏的高度，因为......

svg 徽标周围的间距

我有一个 SVG 元素作为我的徽标，但是，徽标周围有填充，看起来约为 30 像素。我尝试调整徽标的大小，但是当它调整大小时，它会增加我的导航栏的高度，因为......

将文本插入到svg的边框中

我有一个 svg，其周边画有边框。您能告诉我如何为此边框设置文本吗？ 我需要在边框的每个部分都有文本 -

从网站将 SVG HTML 路径提取回 SVG 文件

有没有什么方法可以快速提取网站上的 SVG 资源，包括返回到 SVG 文件的 SVG HTML 路径。有任何应用程序、开发工具、扩展程序可以让您执行此操作吗？

将文本插入到svg的边框中

我有一个 svg，其周边画有边框。您能告诉我如何为此边框设置文本吗？ 我需要在边框的每个部分都有文本 -

添加一个跟随鼠标并根据当前颜色改变颜色的圆圈 |交互式 SVG 着色页 |使用 JavaScript

我正在制作一个交互式着色页。用户会看到一个 SVG 图像，当他们从样本中选择一种颜色时，他们可以单击图像的一部分来更改其填充颜色...

MBTiles 的最佳文件大小/质量：PNG 8Bit、JPEG 或其他 Mapnik 导出（SVG？）可能性？

我用 Tilemill 制作了一张地图，目前当你看到它与 Tilestream 一起提供服务时产生的流量时，它几乎是一个怪物。一点点地图交互可以很快导致大约 15 到

使用 img 标签加载不受信任的 SVG 时出现 XSS

使用img标签加载不受信任的SVG文件是否存在XSS威胁？ 如： 我读到大多数浏览器都禁用通过 th 加载的 svg 文件中的脚本...

如何在 Blender 中以 SVG 格式导出 UV 贴图，但仅导出轮廓

我有来自 3D 对象的 UV 贴图。 现在我想将其导出为 SVG 格式，但我只需要轮廓/边框作为 SVG，而不是所有折线。 是否可以在 Blender 中导出为 SVG 只是轮廓/边框...

为什么我的 SVG 文件没有使用我的字体文件？

我将此 SVG 文件与此字体的 TTF 文件位于同一目录中。 我将此 SVG 文件与 此字体的 TTF 文件放在同一目录中。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="100" viewBox="0 0 150 100" > <style type="text/css"> @font-face { font-family: "easyPrint"; src: url('./easy-print.regular.ttf'); } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> <text x="10" y="80" font-size="25" > TEST </text> </svg> 当我这样做时，我得到两种不同的字体。应该是我的自定义字体的字体与您在字体系列中给它乱码时看到的字体相同。这与默认值不同。 我也尝试过使用 OTF 文件。具体字体并不重要。我只是想生成一堆具有特定字体的文本 SVG 图像。 如果您需要独立的 svg 文件， 您应该考虑将字体文件嵌入为 base64 资源（使用像 transfonter 这样的工具）： 1.示例：嵌入为 base64 的字体 只要您的应用程序支持 CSS，此 svg 就会显示自定义字体（内联 svg，在 img 元素中引用，直接在浏览器中打开）。 <p>(Letter "a" is not contained in the reduced character subset)</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TESTa </text> </svg> 您可以通过对字体进行子集化来显着减小文件大小： 仅选定的角色可用。 如果您正在部署 google 字体，您也可以尝试 vecta 的 nano 优化器，它具有非常需要的公开可用的 google 字体的自动嵌入功能。 2.示例：Svg2Png 此方法需要将字体内联为 dataURL。 否则 png 输出将呈现默认字体，如 Times。 function svg2Png(selector) { const svgEl = document.querySelector(selector); let svgVB = svgEl.getAttribute('viewBox'); let svgVBArr = svgVB ? svgVB.split(' ') : ''; let svgVBW = svgVBArr ? svgVBArr[2] : ''; let svgVBH = svgVBArr ? svgVBArr[3] : ''; let svgClientBB = svgEl.getBoundingClientRect(); let svgClientW = svgClientBB.width; let svgClientH = svgClientBB.height; let svgBB = svgEl.getBBox(); let svgW = svgVBW? svgVBW : svgBB.width; svgW = svgClientW > svgW ? svgClientW : svgW; let svgH = svgVBH? svgVBH : svgBB.height; svgH = svgClientH > svgH ? svgClientH : svgH; let blob = new Blob([svgEl.outerHTML], {type: 'image/svg+xml'}); let URL = window.URL; let blobURL = URL.createObjectURL(blob); let tmpImg = new Image(); tmpImg.src = blobURL; tmpImg.width = svgClientW > svgW ? svgClientW : svgW; tmpImg.height = svgClientH > svgH ? svgClientH : svgH; tmpImg.onload = () => { let canvas = document.createElement("canvas"); canvas.width = svgW; canvas.height = svgH; let context = canvas.getContext("2d"); // draw blob img to canvas with some delay setTimeout(function () { context.drawImage(tmpImg, 0, 0, svgW, svgH); let pngDataUrl = canvas.toDataURL(); let svgImg = document.createElement("img"); svgImg.width = svgW; svgImg.height = svgH; svgImg.class = "svgImg"; svgImg.src = pngDataUrl; // just additional wrapping for example usage let imgWrp = document.createElement("div"); imgWrp.setAttribute("class", "img-wrp"); imgWrp.appendChild(svgImg); document.body.appendChild(imgWrp); }, 300); }; } svg, img{ border:1px solid #ccc } .svg-wrp{ position:relative; overflow:auto; resize:both; width:50%; } <div class="btn-wrp"> <button type="button" onclick="svg2Png('svg')">svg2Png</button> </div> <div class="svg-wrp"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> </svg> </div> 3.示例：创建 svg，其中文本呈现为路径 此示例部署 opentype.js 库。 Opentype.js 有一个方便的功能 font.getPath() 允许您根据之前加载的字体文件将字符串渲染为 svg <path> 元素。 let svgcontainer = document.querySelector('#svgcontainer'); let inputText = document.querySelector('#inputText'); // opentype.js accepts only ttf and otf let fontFile = 'https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf'; inputText.addEventListener('change', function(e) { let testString = e.currentTarget.value; let params = { string: testString, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) }) //default let params = { string: inputText.value, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) function text2Path(params) { opentype.load(params.font, function(err, font) { if (!err) { let options = params.options; let path = font.getPath(params.string, params.x, params.fontSize, params.fontSize, options); let textPath = path.toSVG(params.decimals); let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); newSvg.classList.add('svgText'); newSvg.setAttribute('xmlns', "http://www.w3.org/2000/svg"); newSvg.insertAdjacentHTML('beforeend', textPath); svgcontainer.appendChild(newSvg); // adjust bbox let bb = newSvg.getBBox(); newSvg.setAttribute('viewBox', '0 0 ' + (bb.width + bb.x) + ' ' + (params.fontSize * 1.5)); //add downloadbtn let btnDownload = document.createElement("a"); btnDownload.setAttribute('download', 'font-' + params.string + '.svg'); btnDownload.textContent = 'Download'; let dataURl = getDataUrl(newSvg.outerHTML, 'image/svg+xml'); btnDownload.href = dataURl; svgcontainer.appendChild(btnDownload) } else { console.log('Font could not be loaded: ' + err); } }); } function getDataUrl(str, mime) { let dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(str))) return dataUrl; } .svgText { height: 10em; display: inline-block; border: 1px solid #ccc; } a { display: block } <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script> <div class="layout"> <div class="frm-wrp"> <input id="inputText" type="text" value="Test"> </div> <div class="svgcontainer" id="svgcontainer"></div> </div> 替代方案：在图形编辑器中将文本转换为路径 这可能是最方便的解决方案。 确保所需的字体已在本地安装（在您的操作系统中）。 在 inkscape 等图形编辑器中打开 svg。 选择 <text> 元素并将它们转换为路径： inkscape：路径/对象到路径 Adobe Illustrator：输入/创建轮廓 SVG 中的字体嵌入 SVG 不会自动包含/嵌入所有使用的字体！ 如前所述：应用程序是否可以处理嵌入字体很大程度上取决于其CSS 支持。 大多数图像查看器都会失败。 使用嵌入字体编辑 SVG 通常，即使您使用 inkscape 等高级编辑器，这也根本不起作用。通常桌面应用程序依赖于基于系统的字体管理，因此它们无法以可编辑模式访问嵌入的字体子集。 您也可以尝试在浏览器中将 svg 转换为 pdf，并在打开时将所有字体转换为路径轮廓。 Inkskape（免费且开源）有一个“绘制所有文本”的选项。 （另请参阅这篇文章）。

Raphael JS - 使用 SVG 文件

我已经看到了几个解决这个问题的线程，但没有什么能真正解决我的问题。我有一个带有地图和不同区域的 SVG 文件。我想做这样的事情： http://raphae...

旋转元素上的 SVG 渐变

我正在尝试在几个旋转的矩形上应用渐变填充以形成一个圆圈。 最终结果会是这样的 但都是独立的、不连贯的部分。 我面临的问题是...

样式化 <use> SVG 符号实例

下面代码的预期效果是，它显示 2 个红色圆圈，如果鼠标悬停在它们上方，它们会变成灰色： .悬停{ 填充：灰色！重要； /* 应用灰色填充颜色 */ 圣...