我喜欢在可调整大小的导航中将 SVG 图像(图标)嵌入到 HTML 页面中。在鼠标悬停或悬停时,我喜欢更改 SVG-Image 的颜色。那不是问题。我知道,我可以使用 CSS 或 JavaScript 编辑 SVG 图像。
问题:我喜欢悬停嵌入 SVG-Image 的 a-tag 或 Element (li, div)。因为 CSS-background-image 脚本是不允许的,我知道。但是,怎么<embed>, <object>, or <iframe>
办?它不起作用...
只有当我将 SVG-Image-XML 直接嵌入 HTML 页面时,它才有效……
一些有效的代码(直接嵌入 XML SVG):
<style>
div {
width: 100%;
height: 100%;
}
div:hover #path {
fill: green;
}
</style>
<div>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="256" y1="50.3503" x2="256" y2="461.6497">
<stop offset="0" style="stop-color:#F2F2F2"/>
<stop offset="1" style="stop-color:#CCCCCC"/>
</linearGradient>
<path id="path" fill="url(#SVGID_1_)" d="M320.073,284.756c87.603-150.03,21.473-234.405-64.072-234.405
c-87.231,0-145.302,84.811-64.072,234.405c27.412,50.483-29.608,62.394-87.375,75.718
c-59.012,13.609-54.473,44.723-54.473,101.176h255.945c-18.591-19.779-30.001-46.384-30.001-75.608
C276.025,352.527,298.795,321.198,320.073,284.756z M386.513,310.556c-41.688,0-75.485,33.797-75.485,75.485
c0,41.689,33.797,75.486,75.485,75.486c41.69,0,75.487-33.797,75.487-75.486C462,344.353,428.203,310.556,386.513,310.556z
M393.424,409.851h-34.069v10.122l-33.864-19.555l33.864-19.558v10.121h34.069V409.851z M416.87,393.977v-10.122h-34.069v-18.869
h34.069v-10.122l33.864,19.555L416.87,393.977z"/>
</g>
</g>
</svg>
</div>
一些无效的代码(嵌入 SVG 与嵌入):
<style>
div {
width: 100%;
height: 100%;
background: url(iconmonsstr-gear-10-icon.svg) top center no-repeat;
background-size: 100%;
}
div:hover #path{
fill: green;
}
</style>
<div>
<embed src="IMAGE_NAME.svg" type="image/svg+xml" />
</div>