- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 CSS 制作一个简单的 SVG 按钮。我设法在悬停时更改了颜色,但颜色转换似乎对我不起作用。我希望至少有 1 秒的过渡时间。这是我正在使用的代码:
SVG:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"><title>Telephone</title><g id="Page-1"><g id="Artboard-2"><g id="Group-13"><g id="Group-4"><g id="Group-9"><rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/></g></g><g id="icons8-phone_office" data-name="icons8-phone office"><rect id="Rectangle-path" x="55.24" y="36.31" width="55.86" height="49.66" rx="3" ry="3" fill="#c2cde7"/><path id="Shape" d="M59.38,72.52H107a4.14,4.14,0,0,1,4.14,4.14v6.21A3.1,3.1,0,0,1,108,86H58.34a3.1,3.1,0,0,1-3.1-3.1V76.66A4.14,4.14,0,0,1,59.38,72.52Z" fill="#acb7d0"/><path id="Shape-2" data-name="Shape" d="M68.69,36.31H108a3.1,3.1,0,0,1,3.1,3.1V54.93H65.59V39.41A3.1,3.1,0,0,1,68.69,36.31Z" fill="#bbdef9"/><polygon id="Shape-3" data-name="Shape" points="78.18 54.93 92.31 36.31 108.86 36.31 94.73 54.93 78.18 54.93" fill="#def0ff"/><polygon id="Shape-4" data-name="Shape" points="69.94 54.93 84.68 36.31 88.17 36.31 73.43 54.93 69.94 54.93" fill="#def0ff"/><polygon id="Shape-5" data-name="Shape" points="66.96 52.86 80.07 36.31 81.1 36.31 68 52.86 66.96 52.86" fill="#def0ff"/><path id="Shape-6" data-name="Shape" d="M66.62,32.17H53.17V28H49V76.66a3.1,3.1,0,0,0,3.1,3.1H66.62a3.1,3.1,0,0,0,3.1-3.1V35.28A3.1,3.1,0,0,0,66.62,32.17Z" fill="#c2cde7"/><rect id="Rectangle-path-2" data-name="Rectangle-path" x="49.03" y="72.52" width="20.69" height="7.24" rx="3" ry="3" fill="#acb7d0"/><path id="Shape-7" data-name="Shape" d="M53.17,32.17h14a2.59,2.59,0,0,1,2.59,2.59h0a2.59,2.59,0,0,1-2.59,2.59h-14Z" fill="#ced9ed"/><rect id="Rectangle-path-3" data-name="Rectangle-path" x="75.93" y="61.14" width="6.21" height="6.21" fill="#ed7899"/><rect id="Rectangle-path-4" data-name="Rectangle-path" x="86.28" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-5" data-name="Rectangle-path" x="96.62" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-6" data-name="Rectangle-path" x="75.93" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-7" data-name="Rectangle-path" x="86.28" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-8" data-name="Rectangle-path" x="96.62" y="71.48" width="6.21" height="6.21" fill="#72caaf"/><path id="Shape-8" data-name="Shape" d="M81.1,60.1H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,68.38H81.1a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,81.1,60.1Zm0,6.21H77V62.17H81.1Z" fill="#2b7db5"/><path id="Shape-9" data-name="Shape" d="M91.45,60.1H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,91.45,60.1Zm0,6.21H87.31V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-10" data-name="Shape" d="M91.45,70.45H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,91.45,70.45Zm0,6.21H87.31V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-11" data-name="Shape" d="M101.79,70.45H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,101.79,70.45Zm0,6.21H97.66V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-12" data-name="Shape" d="M101.79,60.1H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,101.79,60.1Zm0,6.21H97.66V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-13" data-name="Shape" d="M81.1,70.45H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,78.72H81.1a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,81.1,70.45Zm0,6.21H77V72.52H81.1Z" fill="#2b7db5"/><path id="Shape-14" data-name="Shape" d="M78,46.73h1v1H78a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1H79V43.55h1a1,1,0,0,0,0-2.07H78a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-15" data-name="Shape" d="M84.21,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07H84.21a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-16" data-name="Shape" d="M90.41,46.73h1v1h-1a1,1,0,0,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,1,0,0-2.07H90.41a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-17" data-name="Shape" d="M100.76,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07h-2.07a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-18" data-name="Shape" d="M109,35.28H70.66a5.17,5.17,0,0,0-5.07-4.14H54.21v-1a3.1,3.1,0,0,0-6.21,0V75.62a5.17,5.17,0,0,0,5.17,5.17h1v3.1a3.1,3.1,0,0,0,3.1,3.1H109a3.1,3.1,0,0,0,3.1-3.1V38.38A3.1,3.1,0,0,0,109,35.28ZM51.1,29.07a1,1,0,0,1,1,1v8.28a1,1,0,0,0,2.07,0V33.21H65.59a3.1,3.1,0,0,1,3.1,3.1V72.52H50.07V30.1A1,1,0,0,1,51.1,29.07Zm-1,46.55v-1H68.69v1a3.1,3.1,0,0,1-3.1,3.1H53.17A3.1,3.1,0,0,1,50.07,75.62Zm59,9.31H57.31a1,1,0,0,1-1-1v-3.1h9.31a5.17,5.17,0,0,0,5.17-5.17V37.34H109a1,1,0,0,1,1,1V53.9H82.14a1,1,0,1,0,0,2.07h27.93V83.9A1,1,0,0,1,109,84.93Z" fill="#2b7db5"/><path id="Shape-19" data-name="Shape" d="M95.59,46.66h2.07a1,1,0,0,0,0-2.07H95.59a1,1,0,1,0,0,2.07Z" fill="#2b7db5"/><path id="Shape-20" data-name="Shape" d="M54.21,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,54.21,57Z" fill="#2b7db5"/><path id="Shape-21" data-name="Shape" d="M59.38,57a1,1,0,0,0,1-1V53.9a1,1,0,0,0-2.07,0V56A1,1,0,0,0,59.38,57Z" fill="#2b7db5"/><path id="Shape-22" data-name="Shape" d="M64.55,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,64.55,57Z" fill="#2b7db5"/><path id="Shape-23" data-name="Shape" d="M79,54.93a1,1,0,0,0-1-1H73.86a1,1,0,0,0,0,2.07H78A1,1,0,0,0,79,54.93Z" fill="#2b7db5"/></g></g></g></g></svg>
CSS
svg:hover #Rectangle{ fill: #DAF0FF; }
#Rectangle{ transition: 1s; }
https://codepen.io/Vitamin-b/pen/OjgwOd
我们将不胜感激
最佳答案
您需要为 #Rectangle
指定一个起始值,以便转换生效。因为它需要一个值来转换到/从。例如:
#Rectangle{
fill: white;
transition: 1s;
}
#Rectangle{
fill: white; /*Add starting fill*/
transition: 1s; }
svg:hover #Rectangle{
fill: #DAF0FF;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"><title>Telephone</title><g id="Page-1"><g id="Artboard-2"><g id="Group-13"><g id="Group-4"><g id="Group-9"><rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/></g></g><g id="icons8-phone_office" data-name="icons8-phone office"><rect id="Rectangle-path" x="55.24" y="36.31" width="55.86" height="49.66" rx="3" ry="3" fill="#c2cde7"/><path id="Shape" d="M59.38,72.52H107a4.14,4.14,0,0,1,4.14,4.14v6.21A3.1,3.1,0,0,1,108,86H58.34a3.1,3.1,0,0,1-3.1-3.1V76.66A4.14,4.14,0,0,1,59.38,72.52Z" fill="#acb7d0"/><path id="Shape-2" data-name="Shape" d="M68.69,36.31H108a3.1,3.1,0,0,1,3.1,3.1V54.93H65.59V39.41A3.1,3.1,0,0,1,68.69,36.31Z" fill="#bbdef9"/><polygon id="Shape-3" data-name="Shape" points="78.18 54.93 92.31 36.31 108.86 36.31 94.73 54.93 78.18 54.93" fill="#def0ff"/><polygon id="Shape-4" data-name="Shape" points="69.94 54.93 84.68 36.31 88.17 36.31 73.43 54.93 69.94 54.93" fill="#def0ff"/><polygon id="Shape-5" data-name="Shape" points="66.96 52.86 80.07 36.31 81.1 36.31 68 52.86 66.96 52.86" fill="#def0ff"/><path id="Shape-6" data-name="Shape" d="M66.62,32.17H53.17V28H49V76.66a3.1,3.1,0,0,0,3.1,3.1H66.62a3.1,3.1,0,0,0,3.1-3.1V35.28A3.1,3.1,0,0,0,66.62,32.17Z" fill="#c2cde7"/><rect id="Rectangle-path-2" data-name="Rectangle-path" x="49.03" y="72.52" width="20.69" height="7.24" rx="3" ry="3" fill="#acb7d0"/><path id="Shape-7" data-name="Shape" d="M53.17,32.17h14a2.59,2.59,0,0,1,2.59,2.59h0a2.59,2.59,0,0,1-2.59,2.59h-14Z" fill="#ced9ed"/><rect id="Rectangle-path-3" data-name="Rectangle-path" x="75.93" y="61.14" width="6.21" height="6.21" fill="#ed7899"/><rect id="Rectangle-path-4" data-name="Rectangle-path" x="86.28" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-5" data-name="Rectangle-path" x="96.62" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-6" data-name="Rectangle-path" x="75.93" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-7" data-name="Rectangle-path" x="86.28" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-8" data-name="Rectangle-path" x="96.62" y="71.48" width="6.21" height="6.21" fill="#72caaf"/><path id="Shape-8" data-name="Shape" d="M81.1,60.1H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,68.38H81.1a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,81.1,60.1Zm0,6.21H77V62.17H81.1Z" fill="#2b7db5"/><path id="Shape-9" data-name="Shape" d="M91.45,60.1H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,91.45,60.1Zm0,6.21H87.31V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-10" data-name="Shape" d="M91.45,70.45H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,91.45,70.45Zm0,6.21H87.31V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-11" data-name="Shape" d="M101.79,70.45H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,101.79,70.45Zm0,6.21H97.66V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-12" data-name="Shape" d="M101.79,60.1H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,101.79,60.1Zm0,6.21H97.66V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-13" data-name="Shape" d="M81.1,70.45H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,78.72H81.1a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,81.1,70.45Zm0,6.21H77V72.52H81.1Z" fill="#2b7db5"/><path id="Shape-14" data-name="Shape" d="M78,46.73h1v1H78a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1H79V43.55h1a1,1,0,0,0,0-2.07H78a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-15" data-name="Shape" d="M84.21,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07H84.21a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-16" data-name="Shape" d="M90.41,46.73h1v1h-1a1,1,0,0,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,1,0,0-2.07H90.41a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-17" data-name="Shape" d="M100.76,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07h-2.07a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-18" data-name="Shape" d="M109,35.28H70.66a5.17,5.17,0,0,0-5.07-4.14H54.21v-1a3.1,3.1,0,0,0-6.21,0V75.62a5.17,5.17,0,0,0,5.17,5.17h1v3.1a3.1,3.1,0,0,0,3.1,3.1H109a3.1,3.1,0,0,0,3.1-3.1V38.38A3.1,3.1,0,0,0,109,35.28ZM51.1,29.07a1,1,0,0,1,1,1v8.28a1,1,0,0,0,2.07,0V33.21H65.59a3.1,3.1,0,0,1,3.1,3.1V72.52H50.07V30.1A1,1,0,0,1,51.1,29.07Zm-1,46.55v-1H68.69v1a3.1,3.1,0,0,1-3.1,3.1H53.17A3.1,3.1,0,0,1,50.07,75.62Zm59,9.31H57.31a1,1,0,0,1-1-1v-3.1h9.31a5.17,5.17,0,0,0,5.17-5.17V37.34H109a1,1,0,0,1,1,1V53.9H82.14a1,1,0,1,0,0,2.07h27.93V83.9A1,1,0,0,1,109,84.93Z" fill="#2b7db5"/><path id="Shape-19" data-name="Shape" d="M95.59,46.66h2.07a1,1,0,0,0,0-2.07H95.59a1,1,0,1,0,0,2.07Z" fill="#2b7db5"/><path id="Shape-20" data-name="Shape" d="M54.21,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,54.21,57Z" fill="#2b7db5"/><path id="Shape-21" data-name="Shape" d="M59.38,57a1,1,0,0,0,1-1V53.9a1,1,0,0,0-2.07,0V56A1,1,0,0,0,59.38,57Z" fill="#2b7db5"/><path id="Shape-22" data-name="Shape" d="M64.55,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,64.55,57Z" fill="#2b7db5"/><path id="Shape-23" data-name="Shape" d="M79,54.93a1,1,0,0,0-1-1H73.86a1,1,0,0,0,0,2.07H78A1,1,0,0,0,79,54.93Z" fill="#2b7db5"/></g></g></g></g></svg>
关于css - SVG 颜色过渡不适用于悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45626374/
我在我的 Xcode 项目目录中输入了以下内容: keytool -genkey -v -keystore release.keystore -alias mykey -keyalg RSA \
假设我有一个像这样的 DataFrame(或 Series): Value 0 0.5 1 0.8 2 -0.2 3 None 4 None 5 None
我正在对一个 Pandas 系列进行相对繁重的应用。有什么方法可以返回一些打印反馈,说明每次调用函数时在函数内部进行打印还有多远? 最佳答案 您可以使用跟踪器包装您的函数。以下两个示例,一个基于完成的
我有一个 DataFrame,其中一列包含列表作为单元格内容,如下所示: import pandas as pd df = pd.DataFrame({ 'col_lists': [[1, 2
我想使用 Pandas df.apply 但仅限于某些行 作为一个例子,我想做这样的事情,但我的实际问题有点复杂: import pandas as pd import math z = pd.Dat
我有以下 Pandas 数据框 id dist ds 0 0 0 0 5 1 0 0 7 2 0 0
这发生在我尝试使用 Gradle 构建时。由于字符串是对象,因此似乎没有理由发生此错误: No signature of method: java.util.HashMap.getOrDefault(
您好,有人可以解释为什么在 remaining() 函数中的 Backbone 示例应用程序 ( http://backbonejs.org/examples/todos/index.html ) 中
我有两个域类:用户 class User { String username String password String email Date dateCreated
问题陈述: 一个 pandas dataframe 列系列,same_group 需要根据两个现有列 row 和 col 的值从 bool 值创建。如果两个值在字典 memberships 中具有相似
apporable 报告以下错误: error: unknown type name 'MKMapItem'; did you mean 'MKMapView'? MKMapItem* destina
我有一个带有地址列的大型 DataFrame: data addr 0 0.617964 IN,Krishnagiri,635115 1 0.635428 IN,Chennai
我有一个列表list,里面有这样的项目 ElementA: Number=1, Version=1 ElementB: Number=1, Version=2 ElementC: Number=1,
我正在编译我的源代码,它只是在没有运行应用程序的情况下终止。这是我得到的日志: Build/android-armeabi-debug/com.app4u.portaldorugby/PortalDo
我正在尝试根据另一个单元格的值更改单元格值(颜色“红色”或“绿色”)。我运行以下命令: df.loc[0, 'Colour'] = df.loc[0, 'Count'].apply(lambda x:
我想弄清楚如何使用 StateT结合两个 State基于对我的 Scalaz state monad examples 的评论的状态转换器回答。 看来我已经很接近了,但是在尝试申请 sequence
如果我已经为它绑定(bind)了集合,我该如何添加 RibbonLibrary 默认的快速访问项容器。当我从 UI 添加快速访问工具项时,它会抛出 Operation is not valid whi
在我学习期间Typoclassopedia我遇到了这个证明,但我不确定我的证明是否正确。问题是: One might imagine a variant of the interchange law
我是一名优秀的程序员,十分优秀!