svg 相关问题

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

我正在研究 SVG 教程，我只是加载了这样的图像：我正在研究 SVG 教程，我只是加载了这样的图像： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg style="stroke-linejoin:round; stroke:black; stroke-width:0.5pt; text-anchor:middle; fill:none" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, FreeSans, Sans, sans, sans-serif" height="400px" width="400px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250"> <rect y="0" x="0" height="250" width="250" stroke="black" stroke-width="1" fill="blue" /> <image y="0" x="0" height="250" width="250" xlink:href="http://www.blueprintmodel.co.uk/images/DSCF1438.jpg" /> </svg> 即使高度和宽度相同，我也会在 viewBox 的中心、“矩形”上方获得图像。我的问题是：如何将图像拉伸为矩形大小？为什么“图像”标签中的“高度”不起作用？有我可以使用的“拉伸”或“调整大小”等转换吗？（我找不到它们）在 SVG 元素上设置 preserveAspectRatio="none"： <svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" > 还可以使用纯 CSS 来缩放和更改 SVG 的纵横比： transform: scale(x, y); 使用 SVG 图像时，请了解如何操作 preserveAspectRatio 有效 - 有了它，您可以使 SVG 图像以您喜欢的任何方式响应！ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio 回答您的问题：如何将图像拉伸为矩形大小？ <image viewBox="0 0 250 250" preserveAspectRatio="none" … /> 为什么“图像”标签中的“高度”不起作用？我不知道图像出了什么问题，因为原始图像已经消失了。无论如何，对于 SVG，您应该专注于使用 viewBox 而不是宽度和高度。您知道，该名称包含“可扩展”一词，并且使用宽度和高度可以防止这种情况...... 我可以使用“拉伸”或“调整大小”等转换吗？居中且包含： <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet" … 居中并覆盖： <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice" … PS。您需要了解的有关缩放 SVG 图像中的陷阱的所有内容（但请忘记 IE，并且不要使用 padding-bottom hacks）：https://css-tricks.com/scale-svg/ 我这样做是为了拉伸图像以填充父 SVG，效果很好。 <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" x="100" y="100" style="visibility: visible; opacity: 1;"> <image href="my_image" preserveAspectRatio="none" width="100%" height="100%"></image> </svg>

image svg

回答 4 投票 0

如何禁用 svg 预览

在此输入图像描述我不知道我遇到了什么，但我没有安装任何扩展，我的 svgs 开始作为常规文件打开，我不需要，我需要 html 标记。我不知道...

visual-studio-code svg

回答 1 投票 0

将 SVG 路径数据转换为 0-1 范围，以用作 objectBoundingBox 的剪辑路径

我使用从 Illustrator 导出的相当复杂的 SVG 形状作为剪切路径。问题是objectBoundingBox要求路径数据在0-1范围内，而我的路径包含路径d...

html css svg

回答 4 投票 0

使用具有不同种子或偏移量的相同 SVG 过滤器

在我的html页面中，我有一个像这样的SVG过滤器：在我的 html 页面中，我有一个像这样的 SVG 过滤器： <filter id="displacementFilter" height="180%" width="180%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G" /> </filter> 为了使过滤后的元素看起来不同，我想对 <feTurbulence> 标签使用具有不同种子或偏移量的相同过滤器。我不想多次重复过滤器，因为这会显着增加页面的大小，并且使用过滤器的元素数量在页面之间是可变的。有解决办法吗？使用本机 Web 组件，现已支持近十年。 shadowDOM 确保您不会遇到重复 ID 的麻烦。 <b>Who is afraid of Red, Yellow and Blue?</b><br> <svg-splash frequency="0.05"></svg-splash> <svg-splash frequency="0.1" color="yellow"></svg-splash> <svg-splash frequency="0.5" color="blue"></svg-splash> <script> customElements.define('svg-splash', class extends HTMLElement { connectedCallback() { let color = this.getAttribute('color') || 'red'; let frequency = this.getAttribute('frequency') || 0.05; this.attachShadow({ mode: 'open' }).innerHTML = ` <svg style="background:grey" width="100" height="100" viewBox="0 0 120 120"> <filter id="displacementFilter" height="180%" width="180%"> <feTurbulence type="turbulence" baseFrequency="${frequency}" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G" /> </filter> <circle cx="50" cy="50" r="40" fill="${color}" filter="url(#displacementFilter)" /> </svg>`; } }); </script>

javascript html svg svg-filters

回答 1 投票 0

使用 CSS 旋转 SVG 路径

我有这个SVG： * { 背景：#e1e1e1； } 我有这个SVG： * { background: #e1e1e1; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 如何旋转180度？！演示只需使用元素类型选择器并向其添加 transform: rotate(180deg) 属性，如下面的代码片段所示。 * { background: #e1e1e1; } svg { transform: rotate(180deg); } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 或者，如果您只想旋转 path 而不是 svg 本身，请包含 transform-origin，如下面的代码片段所示： * { background: #e1e1e1; } path { transform: rotate(180deg); transform-origin: 50% 50%; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 内联你会这样做： x 轴翻转：transform="scale(-1 1)" y 轴翻转：transform="scale(1 -1)" 例如。在你的例子中： <svg class="decor" transform="scale(-1 1)" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 您还可以直接通过 SVG 本身的 transform 旋转 SVG 的路径。 <svg xmlns="http://www.w3.org/2000/svg" transform="rotate(90 50 50)" viewBox="0 0 100 100" width="100" height="100"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> 您还可以使用 style 属性旋转 180 度，如下所示： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-node-id="a0cef7b2-6c8c-458d-8b52-0c8b80c65008" data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700" data-type="icon" style="transform: rotate(180deg)"> <path d="M342 214l468 298-468 298v-596z" data-node-id="a3145c10-0a28-4d2c-8b7b-8331bc1905c7" data-comp-instance-id="8450d308-bfd8-4e2e-b3b9-a875c5a54700" data-type="path" class=""></path> </svg> 这将显示一个指向左侧的三角形。 * { background: #e1e1e1; } <svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>

css svg

回答 5 投票 0

使用 <image> 标签在 SVG 图像上叠加文本

生成文本，但我无法让文本显示在 SVG 图像上。它位于图像下方。我尝试将文本行移到图像后面，并将图像行移出 . 我还补充了...

svg text overlay

回答 1 投票 0

SVG 路径，描边宽度不一致。怎么让它统一

我正在使用 SVG 路径创建加载屏幕。有一条灰色路径代表未加载的条形图，一条白色路径代表加载的百分比。 document.addEventListener("DOMContentL...

javascript html css svg

回答 1 投票 0

Vite项目中的图片和文件什么时候使用公共资源和资产？

我正在开发一个 Vite 项目，我很难理解每个文件夹之间的区别以及何时为我的每个资产使用它们。来自 Vite Docs 关于 public 的信息：如果您拥有以下资产： ...

reactjs svg vite assets

回答 1 投票 0

BeautifulSoup 美化改变内容，而不仅仅是布局

我有一个 SVG 图像，它是一个 XML 文件。如果我用 BeautifulSoup 解析它并未经修改地输出它，那么当我使用 prettify 时它会修改它。图像呈现不同的效果。文字向左移动...

python xml svg beautifulsoup

回答 1 投票 0

如何用弯曲 SVG 路径中的自定义 SVG 图像或 PNG 替换表情符号，并使用自定义 CSS 类应用旋转？

我正在使用一个 SVG 元素，其中使用元素具有带有弯曲文本的选取框效果。目前，我正在使用 🌟 表情符号作为字幕文本的一部分，但我想...

javascript css svg infinite-scroll

回答 1 投票 0

Python 使用仅 Python 模块渲染 svg 图像

问题很简单，但是我google了很多方法，都没有这样的解决方案：导入 svg 渲染库图 = svg-render-library.open('test.svg') 图.render() 有没有简单的

python svg rendering

回答 1 投票 0

有没有办法保持文本的宽高比固定，但其他 svg 元素不固定？

我有一个由矩形组成的 d3.js 图表，我希望它可以调整大小以适应任何纵横比。我通过添加以下代码来完成这项工作： var canvas = d3.select("#graph-canvas").

javascript svg d3.js

回答 1 投票 0

在 Dimple 中如何更改图例中系列的顺序？

我有一个带有代码的凹坑图 var svg = dimple.newSvg("#chartContainer", 800, 600); var myChart = new dimple.chart(svg, data); myChart.setBounds(120, 30, 750, 550); var x = myChart。

svg d3.js dimple.js

回答 3 投票 0

如何更改 svg 颜色并制作图标？（Qt、C++）

QIcon HmsUiHelper::createIconFromSvg(const QString& svgFilePath, const QColor& 颜色, int 宽度, int 高度) { QSvgRenderer svgRenderer{ svgFilePath }; QPixmap pixmap(宽度, 他...

c++ qt svg

回答 1 投票 0

为什么这个 SVG 过滤器不能在使用 Chrome 的画布上下文中工作？

我有一个 SVG 过滤器保存在与画布托管在同一网站上的文件中。画布尝试使用该过滤器来绘制过滤后的图像，但会渲染原始图像，忽略

javascript svg canvas filter html5-canvas

回答 1 投票 0

将 matplotlib 图形输出到 SVG，其中文本为文本，而不是曲线

当我使用 matplotlib.pyplot.savefig("test.svg", format="svg") 将图形导出为 SVG 时，生成的 SVG 文件很大。这是因为有很多

svg matplotlib

回答 1 投票 0

如何在 Nextjs 15 中导入 svg 图标

我下载了 Vercel 电子商务模板并希望将其与自定义图标一起使用。我已经安装了 @svgr/webpack 并配置了 next.config.mjs：导出默认值{ 图片：{ 格式：['图像/avi...