可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
如何在 Astro 中通过 props 导入带有传递名称的 svg 图像？
我有一个组件，可以从道具中分配标题、描述和图像。我正在使用 JSON 数组进行迭代以创建此组件的多个实例并添加图像。 我有两个问题...
metro.config.js 使用 NativeWind 和 SVG 转换器
我花了几个小时寻找如何混合 NativeWind 和 SVG 阅读器来响应本机应用程序，这是我的答案：
我在某些服务器上的 html 文件中显示 .svg 图像时遇到问题。这让我感到困惑，因为我认为是否渲染 svg 图像是由浏览器决定的，但是......
我有一些带有 svg 扩展名的图像。我需要以灰度模式获取这些图像。是否可以仅使用 css 或我可以对文件或 标签本身执行的任何操作来完成此操作？我不...
更新后（我想）这个简单的脚本不再正常工作。我已经删除了所有不必要的测试和调试代码，但仍然无法解决这个问题。 我有签名
我应该使用 SVG 作为背景而不是插入 DOM 来提高性能吗？
我的列表中有一些SVG，大约有100个节点。它们看起来像： ... 一个...
CSS：反转 SVG 的 mask-property 隐藏的区域
我有一个 SVG，并使用带有背景颜色的蒙版来显示 SVG，是否有任何属性可以用来反转蒙版？例如。通常，SVG 蒙版会隐藏任何尚未隐藏的内容...
如何使用 jQuery UI 使 SVG 标签图像可调整大小？
我有 SVG 图像，如 div 中下面的标签 我有 SVG 图像，如 div 中的下面的标签 <div id="MainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/> </svg> </div> </div> 我正在制作可拖动且可调整大小的。 Draggable 正在研究如何使其可调整大小，我尝试过，但它不起作用。 makeDragableCircle('#annotationText',jQuery('#MainDiv')); function makeDragableCircle(selector,obj){ var height=obj.height(); var width=obj.width(); var objdiv=jQuery( selector ); jQuery( selector ).draggable({ containment: obj, drag: function( event, ui ) { var cleft=ui.position.left*100/width; var top=ui.position.top*100/height; jQuery(event.target).attr('data-offsetx',cleft); jQuery(event.target).attr('data-offsety',top); } }).resizable({ alsoResize: "#"+circle, aspectRatio: 1.0 }); } 正如我在评论中提到的，可调整大小是为像 <div> 或 <span> 这样的盒子模型设计的。您可以在 <svg> 元素上使用它，但它会将其视为 HTML 元素。 如果你想利用它来操作 SVG 对象的结构，你需要自己动手。 $(function() { function makeDragableCircle(selector, obj) { var height = obj.height(); var width = obj.width(); var objdiv = $(selector); var circle = $("#circle", objdiv); $(selector).draggable({ containment: obj, drag: function(event, ui) { var cleft = ui.position.left * 100 / width; var top = ui.position.top * 100 / height; $(event.target).attr('data-offsetx', cleft); $(event.target).attr('data-offsety', top); } }).resizable({ aspectRatio: 1.0, containment: obj, minWidth: 40, minHeight: 40, resize: function(e, ui) { circle.attr({ width: ui.size.width, height: ui.size.height }); $("circle", circle).attr({ cx: Math.round(ui.size.width / 2) - 2, cy: Math.round(ui.size.height / 2) - 2, r: Math.round(ui.size.width / 2) - 4 }); } }); } makeDragableCircle('#annotationText', $('#mainDiv')); }); #mainDiv { width: 400px; height: 200px; border: 1px dashed #eee; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="mainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0" /> </svg> </div> </div> 如您所见，当您拖动时，所有东西都会移动。当您调整大小时，我们会调整 SVG 大小并调整 <circle> 的属性。 希望有帮助。
如何在 svg 中使用 mask 在 safari 上工作？
我下面有这个 svg，它在桌面和 Android 上运行得很好，但是在 safari 上甚至没有尝试显示，我不知道如何修复它，当我删除它 svg 时，我知道它的掩码 bc 的问题
尝试在 Storybook 中使用 svgr rollup 加载器时出错
我正在使用 rollup 来构建 TypeScript React 组件库。我想使用 Storybook 测试这些组件。 @svgr/webpack 加载器工作正常，但如果我用 @svgr/r 替换它......
我正在尝试将一种形状合成到另一种形状上。顶层是一组具有不透明度的笔画。底部只是洪水填充。 问题是我需要笔画保留其原始c...
如何摆脱告诉我将 svg 属性更改为驼峰式大小写的 React 错误警告？
最近我的团队从 React 15.1 升级到了 15.3。此升级带来了以下错误： warning.js:36 警告：未知的 DOM 属性描边宽度。您指的是描边宽度吗？ 以克为单位 在 SVG 中 ...
所以我有一个 SVG 的 url，它是从生成 QR 代码的 API 中获得的，而 SVG 是 QR 代码的图像。我似乎无法找出将这个 SVG 旋转 45 度的最佳方法，我已经尝试过
我正在尝试使这个 SVG 适合 100vw，但我似乎无法实现它。 我尝试添加一个类并使用宽度：100vw。 我尝试添加 viewBox="0 0 900 1135" （并且注意...
我正在尝试使用 SVG 来表示机场及其空域。我已经三次检查了坐标，但 y 轴及其转换方式看起来仍然有问题。当你...
除了http://www.carto.net/papers/svg/gui/textbox/之外，还有人见过文本输入字段的任何javascript实现吗？
我有一个 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/
我有一个页面，其中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 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 元素作为我的徽标，但是，徽标周围有填充，看起来约为 30 像素。我尝试调整徽标的大小，但是当它调整大小时，它会增加我的导航栏的高度，因为......