Question

您好我正在尝试svg和新手。虽然我登陆了我想要更改css值和svg文件填充的情况。但它无法正常工作。

<html>
<head>
    <meta charset='UTF-8'>
    <title>Practice</title>
</head>
<body>
    <style type="text/css">
	.cp2{display: none;}
    .cloud:hover .cp2{	
		fill:#ffffff;
		stroke:#0fc5a5;
		stroke-dasharray:90;
		stroke-dashoffset:0;		
		-webkit-animation:dash 1s linear forwards;
		-o-animation:dash 1s linear forwards;
		-moz-animation:dash 1s linear forwards;
		animation:dash 1s linear forwards;
		pointer-events:all;
	}
	.cloud:hover .cp1{display: none;}    
    </style>
    <h2>SVG</h2>
    <div class="cloud">
       <object  width="40" height="35" type="image/svg+xml"  data="new.svg"></object>
    </div>
</body>
</html>

<!-- And svg file name as "new.svg" as below-->

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" id="cc" class="cc" viewBox="0 0 120 120">
     <path class="cp1" d="M19,18H6A4,4 0 0,1 2,14A4,4 0 0,1 6,10H6.71C7.37,7.69 9.5,6 12,6A5.5,5.5 0 0,1 17.5,11.5V12H19A3,3 0 0,1 22,15A3,3 0 0,1 19,18M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" />	 
	  <path class="cp2" d="M9,12C9.53,12.14 9.85,12.69 9.71,13.22L8.41,18.05C8.27,18.59 7.72,18.9 7.19,18.76C6.65,18.62 6.34,18.07 6.5,17.54L7.78,12.71C7.92,12.17 8.47,11.86 9,12M13,12C13.53,12.14 13.85,12.69 13.71,13.22L11.64,20.95C11.5,21.5 10.95,21.8 10.41,21.66C9.88,21.5 9.56,20.97 9.7,20.43L11.78,12.71C11.92,12.17 12.47,11.86 13,12M17,12C17.53,12.14 17.85,12.69 17.71,13.22L16.41,18.05C16.27,18.59 15.72,18.9 15.19,18.76C14.65,18.62 14.34,18.07 14.5,17.54L15.78,12.71C15.92,12.17 16.47,11.86 17,12M17,10V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.43 4,15.6 3.5,15.32V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12C23,13.5 22.2,14.77 21,15.46V15.46C20.5,15.73 19.91,15.57 19.63,15.09C19.36,14.61 19.5,14 20,13.72V13.73C20.6,13.39 21,12.74 21,12A2,2 0 0,0 19,10H17Z" />
</svg>

现在我希望svg文件的填充和描边改变div（使用class =“cloud”）hover.Altough我能够做同样的情况如果直接在svg文件中应用样式并悬停svg正在改变它的颜色.please建议如果我能做到没有任何javascript.i只想用css而不是javascript来实现这一点。

Answer 1

不，你不能这样做。 CSS不适用于文档边界。您无法在HTML中为CSS设置SVG样式。

但是，如果您只使用单色图标，则可以使用特殊颜色名称int，它允许SVG继承＆＃34;继承＆＃34;来自HTML的当前颜色。

<强> HTML

currentColor

<强> new.svg

<html>
<head>
    <meta charset='UTF-8'>
    <title>Practice</title>
</head>
<body>
    <style type="text/css">
    .cloud {
        color: blue;
        width: 100px;
        height: 100px;
    }
    .cloud:hover {  
        color: red;
    }
    .cloud use {
       fill: currentColor;
    }
    </style>
    <h2>SVG</h2>
    <svg viewBox="0 0 30 30" class="cloud">
       <use xlink:href="new.svg#cloudicon"/>
    </svg>
</body>
</html>

在SVG上应用css，用作html文件中的对象

1 个答案: