CSS覆蓋了SVG地圖上路徑的填充顏色
[英]CSS is overriding Fill Color of Paths on SVG Map
問題描述
我有20多個區域（路徑和多邊形）的SVG地圖。 每個區域都有在地圖html內設置的特定顏色。
問題是由於CSS樣式表，路徑的填充顏色被忽略了。
這是覆蓋它的CSS：
path {
fill: #20487c;
}
下面的示例顯示了由於CSS而導致不正確的藍色區域。 我沒有訪問CSS樣式表的權限，所以我想知道頁面的<body>中是否有糾正此問題的方法。
/* This is whats overidding colors*/ path { fill: #20487c; } path:hover, polygon:hover { fill-opacity: 1.00 !important; }
<br/> <h3>Blue Color areas are incorect.</h3> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve"> <path id="area_01" fill-opacity='0.5' fill="#FDE9AB" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/> <path id="area_02" fill-opacity='0.5' fill="#F28667" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/> <polygon id="area_03" fill-opacity='0.5' fill="#E25C56" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/> <polygon id="area_04" fill-opacity='0.5' fill="#9B3D37" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/> <path id="area 05" fill-opacity='0.5' fill="#FDE9AB" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15 C127.9,68.9,122,70,122,70z"/> <path id="area_06" fill-opacity='0.5' fill="#9B3D37" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1 l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/> <polygon id="area_07" fill-opacity='0.5' fill="#F28667" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/> <polygon id="area_08" fill-opacity='0.5' fill="#E25C56" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/> <polygon id="area_09" fill-opacity='0.5' fill="#9B3D37" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 120,150 104,137 "/> </svg>
1 個解決方案
解決方案1
0 已采納 2018-01-18 01:41:37
SVG表示屬性和針對相同屬性的CSS規則之間的優先級如下，從不重要到更重要：
- 用戶代理默認樣式
- SVG表示屬性
- 樣式表中的CSS規則集*
-
style屬性中的CSS規則集 - 使用
!important關鍵字在樣式表中設置CSS規則 - 在
style屬性中使用！important設置CSS規則
*從第3點開始，將應用常規CSS選擇器重要性規則。
因此，為了在標記中發揮更大的作用，您可以將所有SVG表示法屬性重寫為style屬性中的CSS規則：
/* This is whats overidding colors*/ path { fill: #20487c; } path:hover, polygon:hover { fill-opacity: 1.00 !important; }
<br/> <h3>No more Blue colors</h3> <svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve"> <path id="area_01" style="fill-opacity:0.5; fill:#FDE9AB" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/> <path id="area_02" style="fill-opacity:0.5; fill:#F28667" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/> <polygon id="area_03" style="fill-opacity:0.5; fill:#E25C56" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/> <polygon id="area_04" style="fill-opacity:0.5; fill:#9B3D37" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/> <path id="area 05" style="fill-opacity:0.5; fill:#FDE9AB" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15 C127.9,68.9,122,70,122,70z"/> <path id="area_06" style="fill-opacity:0.5; fill:#9B3D37" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1 l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/> <polygon id="area_07" style="fill-opacity:0.5; fill:#F28667" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/> <polygon id="area_08" style="fill-opacity:0.5; fill:#E25C56" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/> <polygon id="area_09" style="fill-opacity:0.5; fill:#9B3D37" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 120,150 104,137 "/> </svg>
但是，當然，最好的做法是重寫有罪的CSS，以便僅針對應該針對的元素。
內聯 css 樣式填充 SVG 圖像的所有路徑，具有 2 層 javascript
[英]Inline css style fill all paths of an SVG image with 2 layers with javascript
如何使用CSS為svg圖像選擇顏色填充？ （不是內嵌svg）
[英]How to select the color fill for a svg image using css? (Not inline svg)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.