为啥ai导出的svg格式出现颜色翻转的情况

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥ai导出的svg格式出现颜色翻转的情况相关的知识,希望对你有一定的参考价值。

底色和图标的颜色互换了

参考技术A 这是我们准备好的AI源文件,我们就是要将这个源文件导出为svg
AI软件入门-AI中怎么导出svg格式
打开准备好的源文件
AI软件入门-AI中怎么导出svg格式
点击【文件】-脚本-将文档存储为svg
AI软件入门-AI中怎么导出svg格式
我们可以新建一个文件夹,也可以单独保存
AI软件入门-AI中怎么导出svg格式
存储好之后会有一个提醒
AI软件入门-AI中怎么导出svg格式
这样我们就看到了svg的文件
AI软件入门-AI中怎么导出svg格式
这样就可以在浏览器中打开文件了
AI软件入门-AI中怎么导出svg格式追问

我是可以导出SVG格式的,就是导出的格式前段放到代码里出现颜色翻转的情况。

更改内联 SVG 的笔触颜色

【中文标题】更改内联 SVG 的笔触颜色【英文标题】:Changing the stroke color for an inline SVG 【发布时间】:2016-10-22 18:10:46 【问题描述】:

问题 1

我正在尝试更改悬停时内联 svg 的笔触颜色。这是从 Illustrator 导出并通过 Peter Collingridge 的 SVG 优化器的路径。我读过的关于内联 SVG 样式的文章非常直截了当,但这些技术不适用于我的 SVG。

我在标签上放置了一个悬停伪类,似乎无法定位笔画。

<svg class="highlight"   viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>

我将背景颜色设置为粉红色以检查悬停是否正常工作。

.highlight:hover 
  background-color: pink;
  stroke: red;

这里是jsfiddle。

我还尝试将多边形包装在一个带有 id 的 use 标记中,以更改 CSS 中的笔画以及添加带有 stroke:inherit 的 svg 选择器,正如 Codrops 文章中所建议的那样。另外,jQuery 的 hover 方法也没有运气。

我做错了什么,为什么这三种技术不起作用?

问题 2

Sublime Text 2 无法识别 stroke 属性。当我在 CSS 和 HTML 中键入它时,它会变成白色。这是否意味着它无效?我查看了一个 CSS3 插件的 README 文件,看看它添加了什么,并且没有“stroke”属性。我应该在 beta 中使用 Sublime Text 3 吗?

所有这些东西......

【问题讨论】:

无论如何,我强烈建议升级到 Sublime Text 3 (ST3) - 与 三年前 发布的 2 相比,有大量的改进。我已经使用 3 多年了,而且它很稳定——它仍然有“beta”标签,但它很久以前就退出了 beta 版本。现在所有的开发工作都集中在 ST3 上 - "I don't know of any good reason to not use Sublime Text 3" - ST 核心开发人员 Will Bond。此外,ST2 是no longer the default download。 感谢@MattDMo 的提示。非常感谢您的详细回复。 【参考方案1】:

SVG 中的 CSS 是 内联 CSS,因此在您的样式表之后应用,因此会覆盖它。

最简单的解决方案是从 SVG 中提取 CSS 并将其全部放入样式表中。

.highlight 
  fill: none;
  stroke-width: 3;
  stroke: #491EC4;


.highlight:hover 
  /* background-color: pink; */
  stroke: red;
<svg class="highlight"   viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " />
</svg>

【讨论】:

【参考方案2】:

您需要选择多边形标签,因为该标签的样式具有笔触。 由于它使用内联样式进行了装饰,因此您的 css 规则应使用 !important 以覆盖内联样式。

.highlight:hover 
  background-color: pink;

.highlight:hover polygon
  stroke: red !important;
<svg class="highlight"   viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>

免责声明:最好提取内联样式并将它们移动到自己的 css 文件中(如 Paulie_D 所述)。如果无法通过任何方式提取,您可以使用!important

【讨论】:

谢谢拉尔斯。希望我能打两下。 所以你什么也没给?【参考方案3】:

您的 html 中的样式属性会覆盖您的 css 选择器。因此,在 css 中包含所有样式属性。

检查 jsfiddle 链接 ;)

https://jsfiddle.net/ojn8r810/3/

HTML

<svg class="highlight"   viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 "/>
</svg>

CSS

.highlight  
  fill:none;
  stroke-width:3px;
  stroke:#491EC4;

.highlight:hover 
  background-color: pink;
  stroke: red;

【讨论】:

如此简单。非常感谢。

以上是关于为啥ai导出的svg格式出现颜色翻转的情况的主要内容,如果未能解决你的问题,请参考以下文章

多种颜色的svg 怎么生成图标

AI导出svg上传到阿里矢量图标库(Iconfont),图片显示不全

SVG介绍

在AI里面做好的svg图片,导出上传至iconfont,显示有问题

为啥十六进制颜色不适用于 SVG 的 utf8 数据 URL [重复]

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?