可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我正在尝试在网站上使用我在 Figma 中制作的一些 SVG。对于我的一生，我无法让 SVG 尊重父容器。我正在使用 Tailwind 作为 CSS。这是代码： <p>我正在尝试在网站上使用我在 Figma 中制作的一些 SVG。对于我的一生，我无法让 SVG 尊重父容器。我正在使用 Tailwind 作为 CSS。这是代码：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com"></script> <div class="space-y-4"> <div class=" w-16 h-16"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-full h-full object-contain"> <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path> <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path> </svg> </div></code></pre> </div> </div> <p></p> <p>我在这里做错了什么？</p> <p>蒂亚</p> </question> <answer tick="false" vote="0"> <p>例如，尝试设置最大宽度和高度</p> <pre><code><div class=" max-w-16 max-h-16"> </code></pre> </answer> </body></html>
如何从 <animate> 元素 (SVG) 切换特定 <use> 标签
给出以下示例： 给出以下示例： <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </rect> </defs> <!-- i want this to have both animations --> <use id="rect1" href="#rectangle" /> <!-- i want this one to inherit only the fill animation --> <use id="rect2" href="#rectangle" y="50" /> </svg> 如何才能让“rect2”只继承“fill”动画？ OBS：我不想做的是在 defs 内创建一个中间“use”元素，因此主矩形将具有填充动画，中间 use 元素将引用主矩形，并声明“x “ 动画片。当然，在外部元素上使用不同的“hrefs”。 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> </rect> </defs> <!-- i want this to have both animations --> <use id="rect1" href="#rectangle" > <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </use> <!-- i want this one to inherit only the fill animation --> <use id="rect2" href="#rectangle" y="50" /> </svg>
我正在尝试使用以下方式提供 svg 地图： 我正在尝试使用以下方式提供 svg 地图： <object data="map.svg" type="image/svg+xml" width="400" height="300"> <embed src="map.svg" type="image/svg+xml" width="400" height="300" /> </object> 在 Firefox 中，这会导致插件提示。如果我将map.svg重命名为map.xml，它会正确显示图像。我认为这是因为 Django 的开发服务器（特别是 django.views.static.serve）没有为 svg 提供正确的 mime 类型。这是问题吗？如果是，有补丁吗？ 我目前没有可用的 Django 来测试它，但看起来静态服务器使用 mimetypes 库 来确定内容类型（特别是 Guess_type()）。 通过谷歌搜索，我发现了一些代码，你可以将它们放入settings.py中以添加对 svg 内容类型的支持： import mimetypes mimetypes.add_type("image/svg+xml", ".svg", True) mimetypes.add_type("image/svg+xml", ".svgz", True) 还有这篇专门针对 Pylons 的博客文章，但它提到了类似的问题。他指定 MIME 类型存储在“/etc/mime.types”中，并且缺少 SVG，因为它不是官方 MIME 类型。他可能是对的，因为我在 IANA 上找不到 SVG 的 MIME 类型。 如果您从常规 django 视图动态提供 SVG，则可以在从该视图返回的 HTTPResponse 对象中指定 mimetype。在这种情况下，您需要为开发和生产使用准备好 mimetype： def myview(request): svg_data = generate_some_svg_data() return HttpResponse(svg_data, mimetype="image/svg+xml") 在我的例子中，发行者是使用 nginx+gunicorn 进行的部署。我的 nginx docker 映像为 .svg 文件提供文本/纯 mimetype。 mime.types 的扩展解决了这个问题： http { include mime.types; types { image/svg+xml svg; } 简单来说，该应用程序不在 nginx 端提供静态文件。 在 nginx 端提供静态文件后，一切正常。 # nginx.conf server { ... location /static { root /etc/nginx/html; } } # Dockerfile COPY ./django_app/static /etc/nginx/html/static
是否存在可以对路径（贝塞尔曲线）执行布尔运算的Javascript库？ 我了解 Paper.js 和 Raphael.js，但现在都无法执行这些操作。
如何在 HTML 上添加链接到我的 linkedin SVG
我一直在尝试将 linkedin svg 图像添加到 html，将其链接到我的 linkedin 页面。我已经设法让图像在本地显示，但这在浏览器上不起作用（图像不...
我有 GitHub 徽标的 svg（取自 Simple Icons）。 我想把这个 svg 放在一个圆圈的中心，这样它看起来像这样： 我尝试从 svg 中获取路径并创建另一个......
我有下面的 html 代码，该代码是根据这篇文章“使用 HTML5 和 iPad 捕获签名来收集表单签名”中的第五个答案改编的。然而我遇到的问题是使用...
为了准备用于生产环境或发布的矢量图像，我希望将SVG文件的代码统一为一种形式。 简而言之，我有一个包含 SVG 文件的文件夹...
我想使用TPathData创建类似网格的表单，然后使用DrawPath打印到画布，但我不想使用DrawRect等直接打印到画布。这是一个简化的示例...
使用 BootStrap 模板。尝试替换 SVG 图标但找不到位置
全部。我对网页设计非常陌生，一直在尝试引导模板和 Dream Weaver。 我想更改一些图标，但我不知道如何更改它们...
最近更改后，RMarkdown 图形呈现为 HTML 而不是 SVG
我正在使用 RMarkdown 和 knit 生成 HTML 文档。我之前使用此 yaml 和块选项将所有 ggplot2 图形设置为渲染为 SVG： 输出： html_文档： 自包含：...
在我的 React 项目中，我想在悬停时更改 svg 的描边颜色。我通过将 svg 导入为 ReactCompnent 然后有条件地发送 prop （useState 钩子来确定 wh...
在我的html中我有透明的svg圆圈。我需要反转这个 svg 圆圈上的颜色，所以我会看到带有青色文本的黑色圆圈。 我尝试使用过滤器 inve 将 .cursor__inner 的填充设置为透明...
我有一个包含两个 SMIL 动画的 SVG。我想通过使用按钮暂停和运行动画来控制一条路径的动画（该组的 id="poi_front"），然后让
我在 SVG 元素上有一个矩形。然后我想在整个 SVG 区域上绘制另一个矩形，除了我已经绘制的矩形之外。 我认为面具可能是一个解决方案，但它们似乎只是......
我有一个水平响应式 SVG 路径，可以在不保持其比例的情况下进行拉伸，并且在标签上使用preserveAspectRatio =“none”和vector-effect =“non-scaling-st...”时它可以工作
我正在使用 Vue.js 并尝试为我的 Web 应用程序放置一些我在 Illustrator 中制作的 SVG 图标。我使用 Webpacks“require”加载了图标。无法通过其源访问 svg（src
我找不到更改下面代码以删除 SVG 图像中的空白的方法。我应该修改或删除什么才能实现此目的？我正在使用此网站编辑代码：https://petercolling...
我正在尝试将外部网页的链接添加到 svg 的单个路径上。但是，当我尝试像使用普通链接一样使用 时，它不起作用。 任何想法...
如果包含在 DIV 元素内，宽度和高度为 100% 的 SVG 会导致溢出
Codepen 示例 下面显示的 HTML 工作得很好。 它显示了一些 SVG 元素，该元素始终与其父级大小相匹配，没有任何溢出。这就是我想要的。 但是当 Codepen 示例 下面显示的 HTML 工作得很好。 它显示了一些 SVG 元素，该元素始终与其父级大小相匹配，没有任何溢出。这就是我想要的。 但是，当 <div class="svg-inner-container"> 元素被重新注释时，SVG 会导致不必要的溢出。为什么？ 相关主题/答案建议在SVG上设置display: block。但这并不能改变任何事情。 我正在使用 Brave 浏览器 Version 1.70.123 Chromium: 129.0.6668.89。 Edge Version 129.0.2792.79 有同样的问题。 这里 SVG 工作正常，因为没有使用包装器 div： // Step 0. Look at the result // Obersvation 0: The SVG perfectly matches its parents size and causes no overflow at any viewport. This is what the result is supposed to look like. But the final result also needs to use the commented out <div class="svg-inner-container"> element. // Step 1. Comment in the <div class="svg-inner-container">. // Obersavation 1: For some reason this is causing an unwanted overflow. Why? // Step 2. Perhaps This could help to understand the problem. Change the class "svg-inner-container" to "svg-inner-container-90-50". Now play with the viewport width. // Oservation 2: If the viewport width is very small, then the svg matches the 90-50 size. But if the viewport grows in width, at some point the svg height scales beyond its 50% limit. This is very confusing to me. .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg-inner-container-90-50 { width: 90%; height: 50%; } .svg{ width: 100%; height: 100%; background: lightgreen; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <!-- <div class="svg-inner-container"> --> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> <!-- </div> --> </div> </div> 这里 SVG 被包装在一个额外的 DIV 中，并导致不必要的溢出： .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg{ width: 100%; height: 100%; background: lightgreen; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <div class="svg-inner-container"> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> </div> </div> </div> 在 SVG 上设置 vertical-align: top 以“删除”字体下行空间 .root{ width: 70vh; height: 70vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg{ width: 100%; height: 100%; background: lightgreen; vertical-align:top; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <div class="svg-inner-container"> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> </div> </div> </div>