Question

我有一个不同路径，椭圆等的svg。它们有不同的填充颜色。说红色＆amp;蓝色。现在，我将它们全部放入精灵中，现在想在悬停时用css修改填充颜色，所以我通常会从svg中删除填充并使用css'fill属性执行所有操作。 / p>

但是，由于我在这里有不同的颜色，我不能简单地做fill:red，因为一切都是红色的，但我想要一些是蓝色的。

Answer 1

您可以为每个路径添加不同的类：

<circle  class="circleClass" cx="40" cy="50" r="26"/>
<square  class="squareClass"   cx="40" cy="50" r="26"/>

然后在CSS中定位这些类：

.circleClass {
  fill: red;
}

Answer 2

您可以为每个路径添加一个类，也可以使用nth-child。

这是一个简单的例子：

<path bla-bla-bla>
<path bla-bla-bla>
<path bla-bla-bla>

path:nth-child(1){
   fill:red;
}

path:nth-child(2){
   fill:blue;
}

path:nth-child(3){
   fill:green;
}

Answer 3

你在做什么是行不通的。通过<use>引用的任何内容都不会出现在.icon:hover .outer { }元素下的DOM中。

outer

无法工作，因为类.icon的路径不是#btn-tester .outer { }的后代。如果要设置符号内容的样式，则需要通过将符号直接应用于符号来实现。例如：

:hover

不幸的是#btn-tester:hover .outer { }个事件不适用于符号。所以你不能这样做：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>  
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00',  '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00'];
abc[6]='2014-05-02 20:23:00';
var trace1 = {
x: abc,
y: [1, 3, 6,9, 4, 5,8],
  fill: 'tozeroy',
  fillcolor: 'red',
  text: server1,
  hoverinfo: "x+y+text",
  type: 'scatter',
  mode:"markers",
  marker:
  {
    size:4,
    color:"gray"
  },
  uid:"c2e171",
  dragmode:"turntable"
};
var layout = {
  margin: {
    l: 35,
    r: 40,
    b: 50,
    t: 10
  },
  legend: {
    "orientation": "h"
  },
  xaxis: {
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  yaxis : {
    fixedrange: true,
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  dragmode:false,
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']});

var plotDiv = document.getElementById('myDiv');
plotDiv.on('plotly_relayout',
function(eventdata){  
    alert( 'ZOOM!' + '\n\n' +
        'Event data:' + '\n' + 
         JSON.stringify(eventdata) + '\n\n' +
        'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
        'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
        var xVal = new Date(eventdata['xaxis.range[0]']);
        var yVal = new Date(eventdata['xaxis.range[1]']);
});

</script>
</body>

即使这样有效，你也可能不想这样做。如果页面上有符号的任何其他用途，它也会改变它们。

您可能只需要在您想要的页面上内联SVG。而不是使用符号。

SVG / CSS - 用不同的颜色填充不同的路径

3 个答案: