svg 相关问题

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

使用 jQuery 或 JavaScript 根据其他元素的可见性分配 SVG 坐标

我有 12 个圆形 div，由 4 个圆圈（A、B、C 和 D）的 3 条垂直线组成。图片01 总共只能同时看到 6 个圆圈，并且一次只能看到 2 个圆圈...

javascript jquery svg

回答 1 投票 0

当我调整屏幕大小时，如何向下滚动 pathIcon 移动屏幕中心并沿着 path-svg 移动？

目前，我的pathIcon移动遵循中心屏幕的path-svg。我的问题：当我调整屏幕大小时，path-svg（注意：我设置了 svg 的 witdh 和高度是 vw 单位以方便调整大小）有一个新的大小......

javascript html css svg scroll

回答 1 投票 0

在ElementTree中添加前缀属性

我正在 ElementTree 中操作 SVG 文件。给定文件 test.svg 我正在 ElementTree 中操作 SVG 文件。给定文件test.svg <?xml version='1.0' encoding='utf-8'?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> 我尝试创建一个具有特定前缀的元素 import xml.etree.ElementTree as ET ET.register_namespace("", "http://www.w3.org/2000/svg") tree = ET.parse('test.svg') tree.getroot().set("xmlns:xlink", "http://www.w3.org/1999/xlink") link = ET.fromstring('<a xlink:href="http://www.example.com/"></a>') tree.write('worldMap/test_out.svg', encoding = 'utf-8', xml_declaration = True) 但是遇到了unbound prefix错误。我已经浏览了本教程，但不太明白出了什么问题。您还必须在使用 xlink: 解析的字符串中声明 fromstring link = ET.fromstring('<a xmlns:xlink="http://www.w3.org/1999/xlink" ' 'xlink:href="http://www.mysite.com/"></a>')

python xml svg elementtree prefix

回答 1 投票 0

使用 CSS 操作外部 svg 文件样式属性

我正在尝试通过 CSS 操作外部 .svg 文件。超文本标记语言我正在尝试通过 CSS 操作外部 .svg 文件。 HTML <body> <div class="mysvg"> <img src="decho.svg" alt="decho" width="200px"></img> </div> </body> CSS div.mysvg img { opacity: .3; transition: opacity 1s linear 0s; } div.mysvg img:hover { opacity: 1; } 此代码适用于不透明度，但不适用于 fill 或其他 svg 特定属性，如 stroke。我知道我无法使用 img 标签来做到这一点，但我已经寻找了几个小时，但找不到使用 svg 或 object 来做到这一点的正确方法。所以基本上，我的问题是，如何实现与我链接的代码相同的结果，但要能够操作填充、描边等属性，并且它必须是一个外部文件，而不仅仅是内联svg代码粘贴到 html 中。如果有人能够向我展示正确的方法，我将不胜感激。谢谢。编辑：我设法通过在 .svg 文件本身中添加 css 来做到这一点。它必须位于 svg 开始标记之后。 <svg ...> <style type="text/css" media="screen"> <![CDATA[ g { fill: yellow; stroke: black; stroke-width: 1; transition: fill 1s linear 0s; } g:hover { fill: blue; } ]]> </style> <g> <path ...> </g> </svg> 您还需要将其作为 object 插入到 html 中，否则将无法工作。 <object data="decho.svg" type="image/svg+xml"> 希望这对将来像我一样寻找答案的人有所帮助。这对我有帮助http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/。我认为这是 svg 中最大的缺陷：沙箱。 Svg 文件在其自己的文档中被沙箱化：，这就是典型的“fill:”样式不适用的原因。同样，您在 svg 中编写的 css 将不适用于网站的其余部分。将 css 直接添加到 svg：这不是一个好的解决方案，因为你最终会在你使用的每个 svg 中重写 css。真正的解决方案：“图标系统”。 Svg 字体或 svg 精灵。阅读更多关于他们的信息这里。不透明度起作用的原因：不透明度适用于 svg 对象/框架本身，而不是 svg 的内容（无法访问）。我还应该注意，无论您如何加载这些 svg，内联，通过引用，在对象中作为背景，您都将无法进入沙箱。这就是为什么需要将它们转换为字体或使用精灵才能使用悬停、焦点和其他效果/过渡。如果 SVG 托管在同一域上（感谢 @FabienSnauwaert）并且它本身没有定义填充颜色，并且 CSS 中不包含父选择器，则这是可能的。例如：我有以下文件： icon-sprite.svg（我的 SVG 外部精灵）按钮.scss 测试.html 图标精灵.svg 为了清楚起见，我省略了其他 SVG。 <svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"> <symbol viewBox="0 0 1500 828" id="icon-arrow-3pt-down"> <title>arrow-3pt-down</title> <path d="M1500 0H0l738.9 827.7z"/> </symbol> </svg> 测试.html <button class="button--large"> Large button <svg class="svg" width="20px" height="20px"> <use xlink:href="icon-sprite.svg#icon-arrow-3pt-down"></use> </svg> </button> 按钮.scss .svg { fill: red; } 由于影子 DOM 边界，如果我要使用 body .svg，这将无法工作。请参阅这篇 CSS 技巧文章了解更多信息我最近遇到了这个。虽然由于某些原因 SVG 不是 DOM 的一部分，但您可以使用一些 javascript 将它们移动到 DOM： <object type="image/svg+xml" data="illustration.svg" onload="this.parentNode.replaceChild(this.contentDocument.documentElement, this);"> </object> 这将在加载后将 <object> 替换为内联。如果 javascript 被禁用，它会退回到 <object> 标签，并且 svg 将不会被主题化。就我而言，样式是针对 javascript 控制的深色主题，因此拥有正确的后备意味着没有主题问题。考虑的其他选项（xlink 对于精灵来说是一个很好的选择）：使用外部库在DOM中加载svgs（在我看来，上面的js很简单）使用 svg 滤镜进行色度键控。这使得 svgs 的编辑更加复杂，可能会使用更多的资源来执行过滤，并且灵活性较差。请注意，我不确定安全隐患，最好将其保存为您控制的文件。不幸的是，Web 标准中没有内置功能可以实现这一点。 SVG 符号是一个选项，但不适用于 CDN 上托管的文件。此外，您需要确保正确定义 SVG 文件才能使用 <use> 标签。我创建了一个库，svg-loader，可以更轻松地实现这一目标。它使用Javascript，但只有3kb，并且是异步加载的，因此对性能的影响可以忽略不计。它是即插即用的，因此除了包含 <script> 标签之外，您无需执行任何操作。这是一个 Codepen 示例。我需要这个来改变具有 svg 背景的元素的填充颜色，在悬停时并给定不同的条件。我不想为每个需要的背景颜色添加一个新的 svg。在这种情况下，我需要一个六边形背景图像。所以我创建了两个 svgs，一个用于遮罩，另一个用于正常背景颜色。这是 svg（感谢维基媒体）：hexagon.svg <svg xmlns="http://www.w3.org/2000/svg" height="628" width="726"> <polygon points="723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314" fill="none" stroke="black" stroke-width="4"/> </svg> 我将此 svg 复制到另一张，完全相同，只是使用 fill="#fff" (hexagon-masked.svg) 对于我使用的CSS（scss） .cel { background-image: url("/assets/img/hexagon.svg"); background-size: 100% 100%; background-repeat: no-repeat; //mask the background mask-image: url("/assets/img/hexagon-mask.svg"); mask-size: 100% 100%; mask-repeat: no-repeat; background-color: white; &:hover { background-color: red; color: white } } 这样，只有 .cel div 的遮罩部分获得背景颜色，即不透明的“hexagon-masked.svg”六边形的 insade。需要正常的背景图片来设置笔画。所以，我仍然需要 svgs，但仅此而已。

html css svg

回答 5 投票 0

如何从调整大小/缩放的 SVG 路径定义新的“d”属性？

我的问题目前，我已将 pathIcon 沿着 SVG 路径的“d”路径放置。但是，如果我更改 SVG 的大小，“d”属性也必须更改。我如何定义一个新的“d”

javascript html css svg

回答 1 投票 0

如何使用剪辑路径删除剪辑的 DIV 之间不需要的间隙？

我正在尝试构建一种环形形式的选择菜单。为此，我使用 CSS 剪辑路径。到目前为止，切割各个零件是有效的，通过旋转排列各个部分也是如此。然而...

css svg clip-path

回答 1 投票 0

SVG 到 CDR 转换器

我有一个 SVG 文件，其中包含旋转、半透明、剪辑（剪辑路径）元素（例如多边形、图像）。该文件在 Inkscape 中完美运行，但为了进一步进行图像处理，我会...

php svg converters cdr

回答 3 投票 0

Safari 不会在深色模式下渲染 SVG

我发现它无法在 Safari 中使用媒体查询更改 svg 颜色。在我的 svg 文件中，我有以下内联样式：我发现它无法通过 Safari 中的媒体查询更改 svg 颜色。在我的 svg 文件中，我有以下内联样式： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="783px" height="427px"> <defs> <style> .logo { fill: #000; } @media (prefers-color-scheme: light) { .logo { fill: green; } } @media (prefers-color-scheme: dark) { .logo { fill: #FFF; } } </style> </defs> <text class="logo" kerning="auto" font-family='helvetica' font-size="833.333px" x="0px" y="428px">Q</text> </svg> 在我的html中： <img src="/mylogo.svg" className="logo" /> 在 Chrome 中，这是可行的。我可以在 DevTools 中模拟浅色和深色之间的配色方案，并且得到正确的颜色，但在 Safari 中这是行不通的。当我将首选配色方案模拟为深色模式时，页面将 svg 渲染为绿色，并且不会更改为白色。我怎样才能让它在 Safari 中正确渲染？示例代码 svg { width : 100px; height : 100px; background : lightblue; --st-color : red; } svg line { stroke : var(--st-color); } @media (prefers-color-scheme: light) { svg {--st-color : green; } } @media (prefers-color-scheme: dark) { svg {--st-color : orange; } } <svg viewbox="0 0 100 100"> <line x1="0" y1="80" x2="100" y2="20" stroke-width="4" /> </svg>

html css svg safari darkmode

回答 1 投票 0

flutter_svg 在 Web 构建中加载缩小版本

我使用flutter_svg来显示SVG文件。它在计算机上的调试模式下工作正常，但构建版本已损坏并尝试从另一个路径加载 SVG 文件：minified:fi.svg。当我使用...

flutter svg

回答 1 投票 0

如何将Android xml布局转换为png/svg以在iOS版本中使用

对于 Android 布局/*.xml 文件：对于 Android layout/*.xml 文件： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/locationMarker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="30dp" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/locationMarkertext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/rounded_corner_map" android:gravity="center" android:minWidth="180dp" android:onClick="create" android:paddingLeft="2dp" android:paddingRight="2dp" android:text="Pick the Location" android:textColor="@android:color/white" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:onClick="create" android:src="@drawable/plus" /> </LinearLayout> 它看起来像这样：我想在 iOS 上重用它。是否可以导出为其他格式（.svg、.png等）以允许重复使用而无需重新创建？它需要透明度，并且 .svg 似乎比 .png 更可取。我希望只有显示的可见部分也可以单击。 iOS 中的同等技术是 Apple 的 “自动布局”系统。一旦掌握了它，就很容易使用；事实上，就像任何事情一样，它是一个专业的事情。当然，您可以制作一个透明的 PNG 并将其用作 UIButton 的图像。我真的建议在Apple中使用“UIButton”，并调整颜色等，直到你得到一个不错的外观——虽然与其他平台不完全相同。两个关键点是从技术上来说，让应用程序在不同平台上看起来相同几乎是不可能的几乎每个人都同意你不应该尝试这样做；除了游戏之外，允许按钮等元素在每个平台/操作系统版本上“自然”。顺便说一句，我不知道为什么有人会否决你的问题。跨平台问题是当今开发中最关键的问题之一。

android ios xml svg png

回答 1 投票 0

解决 SVG Lollipop 图表中计算值与可见最大值之间的差异

_嗨，我有一个 SVG 棒棒糖图表，其中的彩色条代表最小值和最大值。但是，计算出的最大值似乎与图表上可见的最大值不匹配。我是...

svg powerbi dax powerbi-desktop measure

回答 1 投票 0

CSS SVG 路径 - 圆形进度条（小修正）

正如您从下面的代码中看到的，我有一个可爱的圆形进度条，但是我有几个问题，并且对如何实现这一点有点迷失（理想情况下我不想使用任何 JS）我想做...

html css svg

回答 3 投票 0

SVG 三角形到圆形动画

我目前正在尝试创建一个动画，其中三角形变成圆形然后再变回来。我当前的问题是，当它们相互变形时，线条会以不同的方式弯曲。

svg css-animations

回答 1 投票 0

如何保留 SVG 符号的宽高比？

我需要多次重复使用某些 SVG 图标，为了避免重复，我将它们放在标签中，稍后再用重复使用它们。但是，我想通过仅定义 h 来调整图标大小...

html css svg

回答 2 投票 0

背景外部 svg

我想在svg中的心形外部应用背景，并且我希望心形内部保持透明，这可能吗？先感谢您这是 SVG 代码：我想在 svg 中的心形外部应用背景，并且希望心形内部保持透明，这可能吗？提前谢谢你这是 SVG 代码： <svg width="23" height="23" viewBox="0 0 23 21" fill="none" class="card__icone__default" xmlns="http://www.w3.org/2000/svg"> <path d="M20.3647 1.43666C18.01 -0.752399 14.5081 -0.358649 12.3468 2.07416L11.5003 3.02573L10.6538 2.07416C8.49677 -0.358649 4.99052 -0.752399 2.63583 1.43666C-0.0626076 3.94916 -0.204405 8.45854 2.21044 11.182L10.5249 20.5476C11.062 21.1523 11.9343 21.1523 12.4714 20.5476L20.7858 11.182C23.205 8.45854 23.0632 3.94916 20.3647 1.43666Z" stroke="#101010"/> </svg> 我想在心的外部应用背景，对心的内部应用透明您无法对 <img src="" 执行此操作，因为全局 CSS 无法对图像的 inside 进行样式设置。另一种方法是自己加载 SVG，并将其注入到 DOM 中，这样就可以应用 CSS <script src="https://load-file.github.io/element.js"></script> <load-file src="https://svg-cdn.github.io/heart.svg"> <style shadowRoot> svg { background: gold; width: 160px } path { fill: green } </style> </load-file> <style> svg { background: pink; width: 150px } path { fill: gold } </style> <load-file replaceWith src="https://svg-cdn.github.io/simpleheart.svg"> </load-file 我写了一篇关于 <load-file> Web 组件的 Dev.to 帖子：https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

svg

回答 1 投票 0

WordPress 菜单 - SVG <path> 菜单项上的动画

我正在 WordPress 中制作菜单，出现了一个问题：是否可以在菜单项中嵌入 SVG 代码，以便在单击它们时触发动画？在下面的例子中，...

php wordpress svg wp-nav-walker wp-nav-menu-item

回答 1 投票 0

如何在命令行上将 svg 导出为 png而不使用抗锯齿

我需要对 svg 文件进行一些批处理。 SVG 元素都是黑色或白色，我需要单色（黑/白，无灰度）的位图图像。从 inkscape gui 中我...

svg imagemagick inkscape

回答 2 投票 0

类型错误：尝试在 require(`${some_var_string}`) 中使用模板文字时，无法将对象转换为原始值

尝试在Vite中使用lib“react-inlinesvg”。我有这样的代码： ; 结果我有：反应-inlinesvg.js?v=