- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一些 SVG 图标,我在我的网络应用程序中使用它们。它们都有特定的颜色。无论颜色如何,所有 SVG 图标都只有一种颜色,而不是一种颜色有两种颜色(灰色和红色)。
我有一个 Angular 组件可以在我的网络应用程序中设置我的图标。我的组件的指令如下所示:
import {constants} from '../../../index.constants';
export class MyIcon{
public icon: string;
public iconsPath: string = constants.PATH_TO_ICONS;
public fileExtension: string = '.svg';
static options: ng.IComponentOptions = {
template: '<div ng-include="ctrl.iconsPath + ctrl.icon + ctrl.fileExtension"></div>',
controllerAs: 'ctrl',
controller: MyIcon,
bindings: {
icon: '@'
}
};
}
我可以在我的代码中使用我的组件和一个名为图标的绑定(bind),我可以设置我想使用的图标的名称:
<my-icon icon="pencil"></my-icon>
在附件中您可以找到两种颜色的图标。当我在我的组件中使用它时,所有其他图标的颜色变为红色并且它们的形状发生变化。
当我删除有问题的图标时,所有其他图标都有其特定的颜色并且看起来像它们必须的样子。我不知道为什么会这样,也许是因为错误的图标有两种颜色?
我注意到,错误图标的红色与所有其他图标的红色相同,当它们改变颜色时。
示例:来 self 的导航的图标具有它们特定的颜色并且我的代码中没有错误的图标:
错误示例:当我在我的代码中使用错误图标时,我的导航中的图标和我的网络应用程序中的所有其他图标看起来像这样(红色和丑陋的形状):
错误的 SVG 图标:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#e30613;stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#8b8c8d;}.cls-4{stroke:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>
其他 SVG:
<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>#iArrowIcon .cls-1{fill:none;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="<Compound Path>" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>
有什么想法吗?
最佳答案
您的 svg 具有相同的类,导致问题的 svg 覆盖了其他 svg 中定义的 css 属性。
你可以做的是,为错误的图标添加一个父类或id,并使用它来将它的css 与其他的分开。
像这样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SVG ICONS</title>
</head>
<body>
<svg id="iStopIcon" class="iStopIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>
#iStopIcon .cls-1,#iStopIcon .cls-4{fill:none;stroke-miterlimit:10}#iStopIcon .cls-1{stroke:#e30613;stroke-width:2px}.cls-2{fill:#fff}.cls-3{fill:#8b8c8d}.cls-4{stroke:#fff}
</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>
<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>
#iArrowIcon .cls-1, .cls-4{fill:#ccc;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="<Compound Path>" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>
</body>
</html>
这里我使用的是Id,如果你愿意,你可以使用class。
关于html - 当我在代码中使用特定的 svg 时,所有 svg 的颜色都会变为红色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43628044/
当运行这段代码时,它会以默认大小打开窗口: View [ text "window open with default size" ] 如果 a 明确给出一个大小,它将打开一个具有该大小的窗口
我创建了一个 DataGridView 并添加了一个 DataGridViewImageColumn(使用设计器)。 DataGridView 具有“AllowUserToAddRows = true
如何实现红色数字指示器(例如电子邮件计数通知)? 最佳答案 您正在寻找的是 applicationIconBadgeNumber 属性,它是 UIApplication 的属性。 要从应用中的任何位置
我很想得到一些知道如何解释如何在红色 Node 中创建十六进制到“文本”解码器的人的意见。 我有一个 Elsys 传感器,可以生成包含温度、湿度等信息的有效载荷十六进制。 交付的有效负载是“0100d
我正在使用 node-red 程序,并且使用 OPCUA Node ,该 Node 在有效负载中返回对象数组。 我需要获取对象的一些变量,例如项目的nodeId;我尝试使用下一种格式: var new
我们开发了一个在 OS 6 及更高版本上使用 Blackberry BarcodeScanner 类解码 QR 码的应用程序。当调用条形码扫描仪屏幕时,操作系统对相机权限和应用程序的警告被隐藏,即它进
我需要 SprikeKit 方面的帮助或建议。我的应用程序/游戏通过了 Apple 审查,但后来我收到了一些关于图形的投诉(大红色 X)。我正在使用 spriteNodeWithImageNamed
有人可以看看我的 jsfiddle,看看是否可以使红色 div 在中间垂直对齐,并使红色 div 也居中。您必须使包含红色 div 的 div 具有一定高度 jsFiddle
我不希望我的子页面继承父主题的链接颜色(红色),而是我希望我的子页面上有白色链接,我应该在 html/css 中更改什么才能实现这一点? 父页面CSS a{ text-decoration:no
我想尽可能使用系统颜色。如何选择不包含在系统颜色中的颜色? 两者都是SystemColors WPF 类,SystemColors GetSysColor 的 WinForms 类和 COLOR_*
有谁知道如何以编程方式处理 Android HTC 设备红色(电源)按钮以停止我的操作。当用户在我的屏幕上时按下 REd 按钮时,我想停止运行我的一些操作。我知道对于像后退按钮这样的其他按钮,我可以使
嗨,我是图像处理方面的新手,现在我正在使用 python 处理图像以获得更多洞察力。但是,我对颜色 channel 的理解有点不满意。 在我看来,形状为 (400, 400, 3) 的 RGB 图像意
我正在遵循此处红色文档中的示例:http://static.red-lang.org/red-system-specs.html#section-14 这是我的代码: Red [] #import [
十分钟的谷歌搜索不断返回相同的答案,但在我的情况下无效。我想禁用 Aptana 为制作这些波浪线所做的一切。 我找到了几个指向 Window->Preferences->General->Editor
如何在 Red/System 中创建指向数组中第一个元素的指针? 将地址分配给指针没有问题: my-integer: 1 ptr: declare pointer! [integer!] ptr: :
我希望 webview 在按下后退按钮时显示上一页我正在使用 .canGoBack 来完成此操作,但“.canGoBack”和“.GoBack”带有红线下划线,声明 ==== “无法从静态上下文引用非
有谁知道为什么在 Xcode 项目的导航器中我的 Pods.xcodeproj 文件以红色列出?我假设这意味着 Xcode 无法找到该文件,那么我如何确保它确实存在于项目中。 谢谢! 最佳答案 在工作
Java 线程堆栈组织由以下描述 diagram in comments .所以 1 glibc guard page 似乎是由 pthread_attr_init(pthread_attr*) 设置
我在一个 Conceal 的模态 div 中有一个类似于 facebook 的按钮,当用户单击一个按钮时,模态就会出现。 不幸的是,出现的 facebook 按钮上有一个红色矩形,见下图: 我用的是I
我真的很想在 css 中创建红色的 instagram 泡泡用如图所示的圆形尖端: 除了圆头,我几乎什么都有,但我不确定我应该如何做到最好...... 这是我目前所拥有的: .notif { di
我是一名优秀的程序员,十分优秀!