svg 相关问题

使用reportlab和svglib缩放图形以适合pdf页面

我偶然发现这段代码可以生成一个包含绘图的 PDF，而无需将绘图保存为文件。 我现在尝试在将 svg 添加到 PDF 之前对其进行缩放，使其适合页面（不更改

使用视图转换 API 平滑转换 SVG 元素

我遇到以下问题：我尝试通过应用视图转换名称，使用视图转换 API 将 SVG 元素从一个位置平滑地移动到另一个位置。虽然这非常适合...

为什么在 SVG 中进入/离开子元素时会触发 mouseenter/mouseleave 事件？

我有一个SVG，里面有更多的SVG，里面有数量可变的矩形元素，所有这些都是从数据对象生成的。这是一般层次结构： ...

HTML5 中的 SVG – 什么时候需要 XML 声明 `<?xml version="1.0" encoding="UTF-8"?>`？

在 HTML5 中使用 SVG 时：SVG 是否需要 XML 声明 通过 或 作为图像 作为 CSS 背景图像？ 这与...

如何在 Python 中裁剪 SVG 图像？

通过程序，我正在生成尺寸为 400px x 400px 的 SVG 图像。然而，我想根据一个变量来裁剪这个 SVG 图像的底部，该变量决定了 b 的多少......

<circle> html 标签的用途是什么？

当你可以使用 border-radius 轻松、更直观地制作一个圆形的专用标签时，它还有什么意义呢？内联样式被认为是不好的做法，所以我不明白......

如何在圆环图上均匀分布切片？

我无法弄清楚如何均匀地分布此圆环图上的每个切片。 圆环图截图 从“@storyblok/react”导入{storyblokEditable}； 从...导入 { type BlokType }

运行 vite build 后我的 SVG 资源丢失了

我有一个vite＆react项目，我使用svgr@rollup来使用SVG作为react组件 当我运行 build 时，在 dist/assets 中只找到 src/assets 文件夹中的 png 图像，没有 SVG 文件..我想...

如何使用剪辑路径将圆组合在多边形中并添加阴影

我刚开始使用CSS属性clip-path，并且创建了一个几乎符合我的要求的形状。 我正在寻找创建以下形状，但是很难转换我的正方形......

使用 GSAP 和 SVG 路径对按钮进行动画处理

晚上好。 我一直在尝试实现一个按钮，该按钮使用 SVG 路径来定义其形状以及随后的悬停动画。 我已经创建了动画，它在 svg 上完美运行，但是......

Maui .NET 8 ANDROID 修改 SVG 图像部分的颜色

我正在开发 .NET 8 MAUI 项目，遇到以下问题。该应用程序有不同类型的用户，并且根据用户，它会在运行时更改其主要颜色。这是为了...

将 SVG 元素放置在图像上

是否可以拥有以下元素并设置它们的样式，以便 SVG 对象出现在图像上（即像图像的一部分）？ 目前它们显示在其下方的新行中。 我知道...

svg 样式标签中带有伪类的嵌套 css 声明不起作用

我有 SVg 并在 svg 内添加标签并使用嵌套的 css decration 语法，并且使用 & 它给出了一些 XMl 错误的错误； 首先看这个html示例 ...</desc> <question vote="0"> <p>我有 SVg 并在 svg 内添加标签并使用嵌套的 css decration 语法，并且使用 <pre><code>&amp;</code></pre> 它给出了一些 XMl 错误的错误；</p> <p>首先看这个 html 示例</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>&lt;style type=&#34;text/css&#34;&gt; :root { --color-red: #FF5733; } div { background-color: yellow; .card { border: 2px solid grey; height:2rem; width:2rem; margin: 1rem; background-color: var(--color-red); &amp;:nth-child(odd) { background-color: blue; } } } &lt;/style&gt; &lt;div&gt; &lt;div class=&#34;card&#34;&gt;&lt;/div&gt; &lt;div class=&#34;card&#34;&gt;&lt;/div&gt; &lt;div class=&#34;card&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;section&gt; &lt;p&gt;Working SVG but not applying pseudo-class&lt;/p&gt; &lt;svg width=&#34;600&#34; height=&#34;90&#34; viewBox=&#34;0 0 600 90&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; &lt;rect class=&#34;card&#34; x=&#34;42&#34; y=&#34;50&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;rect class=&#34;card&#34; x=&#34;120&#34; y=&#34;20&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; :root { --color-red: #FF5733; } svg { .card { fill: var(--color-red); :nth-child(odd) { fill: blue; } } } &lt;/style&gt; &lt;/svg&gt; &lt;/section&gt; &lt;section&gt; &lt;p&gt; works when nested under svg `&amp;` does not works &lt;/p&gt; &lt;svg width=&#34;600&#34; height=&#34;90&#34; viewBox=&#34;0 0 600 90&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; &lt;rect class=&#34;card&#34; x=&#34;42&#34; y=&#34;50&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;rect class=&#34;card&#34; x=&#34;120&#34; y=&#34;20&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; :root { --color-red: #FF5733; } svg { .card { fill: var(--color-red); } :nth-child(odd) { fill: blue; } } &lt;/style&gt; &lt;/svg&gt; &lt;/section&gt;</code></pre> </div> </div> <p></p> <p>它有效，如果我们将 <pre><code>&amp;</code></pre> 移至 <pre><code>:nth-child</code></pre>，则不会按预期工作；</p> <p>现在在 svg 中尝试同样的事情（我的要求是每个奇怪的矩形都将是蓝色的，否则是红色的（注意：<pre><code>background-color</code></pre>替换为<pre><code>fill</code></pre>）</p> <pre><code>&lt;svg width=&#34;600&#34; height=&#34;90&#34; viewBox=&#34;0 0 600 90&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; &lt;rect class=&#34;card&#34; x=&#34;42&#34; y=&#34;50&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;rect class=&#34;card&#34; x=&#34;120&#34; y=&#34;20&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; :root { --color-red: #FF5733; } svg { .card { fill: var(--color-red); :nth-child(odd) { fill: blue; } } } &lt;/style&gt; &lt;/svg&gt; </code></pre> <p>上面的<pre><code>:nth-child</code></pre>不起作用，也<pre><code>&amp;:nth-child</code></pre></p> <p>虽然改变了导航，但是它可以工作</p> <pre><code>&lt;svg width=&#34;600&#34; height=&#34;90&#34; viewBox=&#34;0 0 600 90&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; &lt;rect class=&#34;card&#34; x=&#34;42&#34; y=&#34;50&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;rect class=&#34;card&#34; x=&#34;120&#34; y=&#34;20&#34; width=&#34;16&#34; height=&#34;16&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; :root { --color-red: #FF5733; } svg { .card { fill: var(--color-red); } :nth-child(odd) { fill: blue; } } &lt;/style&gt; &lt;/svg&gt; </code></pre> <p>但是然后在第 n-child 前面添加 <pre><code>&amp;</code></pre>，它不起作用并且在浏览器中不显示任何内容</p> <p>所以我的问题是</p> <ul> <li>CSS 嵌套在 svg 样式标签中是否无法正常工作</li> <li>为什么在父级 <pre><code>svg</code></pre> 上添加第 n 个子选择器有效，但在 <pre><code>.card</code></pre></li> 上无效 </ul> </question> <answer tick="false" vote="0"> SVG 中的 <p><pre><code>&lt;style&gt;</code></pre> <strong>没有</strong>范围。</p> <p>清理你的长代码。</p> <p>第二种样式设置整个页面的样式：</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>&lt;svg viewBox=&#34;0 0 100 10&#34;&gt; &lt;rect x=&#34;0&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;rect x=&#34;10&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;rect x=&#34;20&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; svg { rect { fill: red; &amp;:nth-child(odd) { fill: green; } } } &lt;/style&gt; &lt;/svg&gt; &lt;svg viewBox=&#34;0 0 100 10&#34;&gt; &lt;rect x=&#34;0&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;rect x=&#34;10&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;rect x=&#34;20&#34; width=&#34;10&#34; height=&#34;10&#34; /&gt; &lt;style type=&#34;text/css&#34;&gt; svg { rect { fill: rebeccapurple; &amp;:nth-child(odd) { fill: hotpink; } } } &lt;/style&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

Sass DataURI 未闭合引号

Sass 不断给我未关闭的引号错误： ExecJS::ProgramError - /application.css.scss:10760:41102: 未关闭的报价 11:47:13 网络.1 | 背景位置：右中心； 11:47:13 网络....

React 本机 svg 转换器不会使用replaceAttrValues 为 svg 着色

我正在尝试使用react-native-svg-transformer和react-native-svg为svg着色，但它不起作用。我的印象是文件 .svgrrc 没有被考虑在内，因为我...

如何使用 TailwindCSS 渲染内联 svg 元素

我在tailwind.config.ts中定义了一个名为hero的背景图片： 背景图像：{ 英雄： `url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfil...

CSS @import 导致 SVG 文本尺寸的竞争条件

我有一个场景，我正在向 DOM 动态添加元素 添加的元素是 SVG 元素（各种类型） 对于 SVGTextElements，我有布局代码，它将...

Google App Engine 正在发送带有错误 mime 类型的 SVG

我正在使用 Google App Engine 和 Python 2.7，并且我正在尝试使用 svg 文件作为 sprite 表。 由于某种原因，这在 Win7 和 Ubuntu 上运行良好，但在 Vista 或 Mac 上则不行（使用最新的 Chro...

将gradientTransform应用到线性渐变

我无法应用 svg 文件中的所有变换矩阵。 如果文件仅包含路径，并且没有渐变 - 一切正常。但是在添加并应用gradientTransform到线性Gradi之后...

使用Svg.Net读取Svg后丢失信息

我正在 Visual Studio 中使用 SVG.NET 并尝试读取 SVG 的特定元素。 当我从 Visual Studio 中以调试或发布模式读取 SVG 时，一切正常。 然而，当我