svg 相关问题

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。

我想创造一个图像，比如说，一颗戴着王冠的雄鹿，里面有一颗燃烧的心。这两个元素的定义如下所示：我想创造一个图像，比如说，一颗戴着王冠的雄鹿，里面有一颗燃烧的心。两个元素的定义如下： <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="d-none"> <defs> … <symbol id="bi-heart" class="bi bi-heart" viewBox="0 0 16 16"> <path d="…"/> </symbol> <symbol id="bi-stag" class="bi bi-stag" viewBox="0 0 16 16"> <path d="…"/> </symbol> … </defs> </svg> … </body> 我将它们组合起来如下： <div> <svg width="64" height="64" fill="currentColor"> <use href="#bi-heart"></use> <use href="#bi-stag"></use> </svg> </div> 到目前为止一切顺利。但现在我希望雄鹿变小 N 倍，并且以 hz/vt 为中心（或者更好的是，具有相对偏移）。如何实现这一目标？ Kudo 致@enxaneta，答案是： <div> <svg width="64" height="64" fill="currentColor">  <use href="#bi-heart" width="64" height="64"></use>  <use href="#bi-stag" width="32" height="32" x="16" y="16"></use> </svg> </div>

html svg

回答 1 投票 0

散点图中的超链接点 - matplotlib

我看到 matplotlib 的艺术家能够将超链接嵌入到图形对象中，如文档中所示并在此处简要提到。我想尝试将超链接嵌入到页面中...

python matplotlib svg

回答 2 投票 0

旋转不变的 svg 图案

svg 图案的patternUnits 属性似乎允许定义用于图案位置的坐标空间。 “userSpaceOnUse”将使用图案的全局坐标系

svg svg-pattern

回答 1 投票 0

HTML 中的 SVG 占用太多空间

我想要的是使用 SVG 内“路径”定义中的图标。但是当我尝试将其应用到我们的对话框时，SVG 占用了很大的空间。我可以通过强制宽度来控制它

html css svg

回答 1 投票 0

是否有工具可以内联自动生成的 CSS 类中声明的样式？

在不解释我为什么来这里的情况下，我会告诉你我有什么。我有一个包含数千个使用 Adobe Illustrator 制作的 SVG 的文件。 SVG 通过引用一个或多个类属性来设计样式

html svg adobe-illustrator

回答 2 投票 0

如何更改 Leaflet 叠加层中 SVG 元素的描边宽度、描边颜色和不透明度？

我的 Leaflet 地图上有一个 SVG 图层，我在这张地图上创建了标记圆圈、标签框以及连接它们的线。我可以更改 csv 元素的大部分属性，...

css svg leaflet

回答 1 投票 0

内部带有勾号的 SVG 徽章

我正在尝试实现 svg 徽章，并在徽章内部尝试添加勾号，但无法做到这一点。下图是我能做的。我正在尝试做什么，如下图所示。附件是代码...

svg

回答 1 投票 0

使用 Jquery 调整 Svg 图像大小

我正在编写一个 PHP 脚本，其中包含一个包含 SVG 的页面。我想做的是使用 Jquery Resize 功能。我已经在 div 上尝试过了，效果很好，但是当我想要......

javascript jquery svg

回答 2 投票 0

从 Markdown 中的美人鱼图生成正确渲染的 SVG 以进行 Pandoc PDF 转换

我正在尝试使用 Pandoc 将包含 Mermaid 图的 Markdown 文件转换为 PDF。但是，我遇到了 SVG 渲染问题，与此处报告的问题类似。我探索了两个appr...

svg markdown pandoc mermaid pdf-conversion

回答 1 投票 0

从 JavaScript 动态 SVG 渲染的问题

我正在重返网络开发世界，所以很有可能这是我忽略的愚蠢的事情。我已经能够动态创建所有 HTML 组件......

javascript html svg

回答 1 投票 0

使用blob svg可以实现弹出效果吗？

我在这个问题上很挣扎。我找到了一篇文章：https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/，我已经尝试了这些步骤。问题是我...

css svg clip-path

回答 1 投票 0

我的SVG背景图像没有覆盖特定的路径

我在 svg 背景中设置图像时遇到问题，我有这个 svg 代码： SVG 标签：` 我在 svg 背景中设置图像时遇到问题，我有这个 svg 代码： SVG 标签：` <svg viewBox="0 0 530 510" fill="none" xmlns="http://www.w3.org/2000/svg" className={style.my_svg} > defs 定义图像： <defs> <pattern id="copo" patternUnits="userSpaceOnUse" width="100%" height="100%" > <image href={copo} x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" /> </pattern> </defs> 具体路径： <path d="M217.403 137C184.598 137 158 109.911 158 76.5C158 43.0885 184.598 16 217.403 16C250.208 16 250.208 137 217.403 137Z" fill="url(#copo)" /> 我需要覆盖路径中路径大小为 fill="url(#copo)" 的所有图像。但图像超出了。我该如何正确设置？图像在defs中定义，我使用的是reactJS。不要对图案的宽度和高度都使用 100%，而是将尺寸设置为与您正在使用的 viewBox 或路径大小相匹配。使用preserveAspectRatio="none"：这将确保图像缩放以适合整个图案区域，而不保持其纵横比，从而防止溢出。

html css reactjs svg

回答 1 投票 0

如何为 SVG 文档指定标题，其工作方式与 HTML 文档 <title> 中的 <head> 元素相同？元素声明整个文档的人类可读名称，然后该名称显示在浏览器中（当将鼠标悬停在浏览器选项卡等上时）并且是 </desc> <question vote="2"> <p>在 HTML 文档 <pre><code><head></code></pre> 中，<pre><code><title></code></pre> 元素声明整个文档的人类可读名称，然后该名称显示在浏览器中（当鼠标悬停在浏览器选项卡等上时）并被用户代理理解。</p> <p>同样，我如何为 SVG 文档赋予顶级标题，使其实现与 HTML <pre><code><title></code></pre>相同的元数据功能，并由浏览器显示并由用户代理理解？</p> </question> <answer tick="true" vote="2"> <p>我找不到任何网络文章/教程来验证这一点，但是，据我所知，向 <strong>SVG 文档</strong>添加 <strong>meta-title</strong> 是完全简单的。</p> <p>在打开的 <pre><code><svg></code></pre> 元素正下方添加一个 SVG <pre><code><title></code></pre> 元素。</p> <p>就是这样。</p> <p><pre><code><title></code></pre> 在 SVG 中的使用比在 HTML 中要多得多，但未嵌套的 <pre><code><title></code></pre> 作为放置在 SVG 文档开头的第一个元素将充当整个 SVG 文档的 <strong>meta-title</strong>。 </p> <p><strong>示例：</strong></p> <pre><code><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200"> <title>My SVG Document Title Here</title>  <defs> [... SVG DOCUMENT CONTINUES...] </code></pre> </answer> </body></html>

在 HTML 文档中，元素声明整个文档的人类可读名称，然后该名称显示在浏览器中（当将鼠标悬停在浏览器选项卡等上时）并且是 </desc> <question vote="2"> <p>在 HTML 文档 <pre><code><head></code></pre> 中，<pre><code><title></code></pre> 元素声明整个文档的人类可读名称，然后该名称显示在浏览器中（当鼠标悬停在浏览器选项卡等上时）并被用户代理理解。</p> <p>同样，我如何为 SVG 文档赋予顶级标题，使其实现与 HTML <pre><code><title></code></pre>相同的元数据功能，并由浏览器显示并由用户代理理解？</p> </question> <answer tick="true" vote="2"> <p>我找不到任何网络文章/教程来验证这一点，但是，据我所知，向 <strong>SVG 文档</strong>添加 <strong>meta-title</strong> 是完全简单的。</p> <p>在打开的 <pre><code><svg></code></pre> 元素正下方添加一个 SVG <pre><code><title></code></pre> 元素。</p> <p>就是这样。</p> <p><pre><code><title></code></pre> 在 SVG 中的使用比在 HTML 中要多得多，但未嵌套的 <pre><code><title></code></pre> 作为放置在 SVG 文档开头的第一个元素将充当整个 SVG 文档的 <strong>meta-title</strong>。 </p> <p><strong>示例：</strong></p> <pre><code><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200"> <title>My SVG Document Title Here</title>  <defs> [... SVG DOCUMENT CONTINUES...] </code></pre> </answer> </body></html>

svg

回答 0 投票 0

将 SVG 转换为 PNG 用于 mPDF 库时出现黑色背景

我正在开发一项功能，可以使用 Composer/Packagist 的 mpdf/mpdf 库将 DOM 内容转换为 PDF，而且通常效果很好。然而，部分 DOM 内容是使用 ... 生成的

javascript svg mpdf c3.js

回答 1 投票 0

我如何在nunjucks模板中使用SVG

我想创建一个nunjucks模板来从目录动态加载SVG，通过传递图标名称，模板应该使用javascript渲染SVG的内容尝试使用 {{% include...

javascript svg nunjucks

回答 1 投票 0

如何在 React 中仅在 SVG 路径上拖动标签

我正在使用 ReactFlow，我只想在 SVG 路径上拖动标签。 https://codesandbox.io/p/sandbox/elastic-tdd-skl3ph。在此示例中，我只想将“边缘标签”拖动到