当表示为内嵌数据uris时,最新的Chrome似乎已经破坏了svgs的渲染。
此处示例:http://codepen.io/anon/pen/pyqJKd
HTML:
<div class='icontest'></div>
CSS:
html {background-color:black;}
.icontest {
border: 1px solid gray;
background-position: center;
background-repeat: no-repeat;
background-image:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IiIgaGVpZ2h0PSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbDojNTc1NjUwIj48ZyBpZD0iX3gzN19nOHVJM18xXyI+CTxnPgkJPGc+CQkJPHBhdGggZmlsbD0icmdiYSgwLDAsMCwwKSIgZD0iTTExLjA5NSw0OTkuMTM5YzAtMTYxLjg4NywwLTMyMy43NzQsMC00ODUuNjYxYzE2MS44ODcsMCwzMjMuNzc0LDAsNDg1LjY2MiwwJiN4RDsmI3hBOwkJCQljMCwxNjEuODg3LDAsMzIzLjc3NCwwLDQ4NS42NjFDMzM0Ljg2OSw0OTkuMTM5LDE3Mi45ODIsNDk5LjEzOSwxMS4wOTUsNDk5LjEzOXogTTEzMi40NTUsNDExLjk2JiN4RDsmI3hBOwkJCQljMi41NzctNC43MjksMy4zMjMtNy4yODgsNC45NzQtOC45NDljMjcuNzM0LTI3LjkyOCw1NS4zMzYtNTYsODMuNzIzLTgzLjI1MWMzLjQyOS0zLjI4OSwxMS42MjgtMy43NDUsMTYuOTctMi41NzMmI3hEOyYjeEE7CQkJCWM0OC4yMTEsMTAuNTc2LDg3LjE3OS0yOC42NzQsNzYuNjgyLTc2LjkzNWMtMS4yOC01Ljg4MiwxLjAwMS0xNC44NTQsNS4wNTYtMTkuMTk0YzIwLjIzOS0yMS42NTYsNDIuMDY3LTQxLjgxOSw2Mi40MzgtNjMuMzU3JiN4RDsmI3hBOwkJCQljMTIuNTU0LTEzLjI3MywyMy45OTItMjYuNDc5LDQ0LjU2LTE1LjI2NWMxLjY3OSwwLjkxNSw0LjI1NiwwLjM2NSw2LjM5OCwwLjIyMWMzNS42NTYtMi4zODcsNjQuMDE3LTM1LjA5Nyw1OS45NDItNjkuMDg4JiN4RDsmI3hBOwkJCQljLTQuMDcyLTMzLjk2NC0zOC4yMDItNjEuMjk3LTY5LjI1My01Ni4wMjhjLTQyLjQ0NCw3LjIwMS02Mi40NDgsNDcuNzAzLTUzLjQ2NSw3OC4wNDdjMS42NDMsNS41NDctMC43MzIsMTQuODU2LTQuNzYxLDE5LjA5MSYjeEQ7JiN4QTsJCQkJYy0yNC44OTIsMjYuMTctNTAuNDY4LDUxLjcyMi03Ni42NjQsNzYuNTg1Yy00LjM2NCw0LjE0NC0xMy40NzksNi41ODktMTkuMzg3LDUuMjc1Yy00NS45ODQtMTAuMjM1LTg1LjExNSwyOC41NzUtNzUuODQ1LDc1LjEmI3hEOyYjeEE7CQkJCWMxLjI3OSw2LjQxNi0xLjU2NywxNi4wMzctNi4wNjgsMjAuODIxYy0yMy4yNjcsMjQuNzMzLTQ3Ljk0Niw0OC4xMjgtNzEuNTcyLDcyLjUzNGMtOC4xMjcsOC4zOTUtMTUuMTIyLDExLjk3NC0yNy44ODgsOC43ODcmI3hEOyYjeEE7CQkJCWMtMjkuOTg1LTcuNDg1LTU5LjYxLDkuNTI1LTcwLjQ5NSwzNy43MjljLTEwLjkzNSwyOC4zMzgtMC4xODksNTkuNzY4LDI1Ljk3NSw3NS45NzhjMjQuNTMxLDE1LjE5OCw2MS40MTUsMTEuNzI4LDc3LjE0NS0xMi42NTgmI3hEOyYjeEE7CQkJCWMxMi41MDUtMTkuMzgyLDI3LjMzNC0yMC43OTksNDUuOTU1LTE5LjU5N2M1LjM3MSwwLjM0NiwxMS4xOS0xLjIwNiwxNi4wNzIsMC4zNzNjNi4zMzMsMi4wNDksMTMuOTQyLDQuOTMxLDE3LjUwOSw5Ljk0JiN4RDsmI3hBOwkJCQljMTcuMDY0LDIzLjk3NCw0Mi45LDM1LjU3Nyw2OC4zNDksMjkuMDM5YzI3Ljg5Mi03LjE2Nyw0Ny41OTQtMzEuNjQzLDQ4LjEtNTkuNzU2YzAuNDgtMjYuNzU5LTE3LjQ4Mi01MS4zNTgtNDMuNjQ4LTU5Ljc3MyYjeEQ7JiN4QTsJCQkJYy0yNi43MzYtOC41OTgtNTMuOTkzLDEuMjc4LTcwLjgwOCwyNS4xNjhjLTMuMTQsNC40NjMtNy42MDMsMTAuOTI2LTExLjgwMywxMS4yMDYmI3hEOyYjeEE7CQkJCUMxNzIuMTI0LDQxMi42NTcsMTUzLjQ3Nyw0MTEuOTYsMTMyLjQ1NSw0MTEuOTZ6IE0xOTQuOTc1LDEwMC4wNDZjMC42MSwxLjYzLDEuMjE5LDMuMjYsMS44MjgsNC44OTImI3hEOyYjeEE7CQkJCWMtMy40OCwzLjg2Mi02LjgwMSw3Ljg4Ni0xMC40NjksMTEuNTYzYy0yMy45NzksMjQuMDU3LTQ4LjI4MSw0Ny43OTktNzEuOTIxLDcyLjE4MmMtNy41MzYsNy43NzMtMTQuMTQzLDEwLjEzNy0yNS4zNjQsNy4yMTEmI3hEOyYjeEE7CQkJCWMtMjcuMzItNy4xMjQtNTUuMjU4LDYuNTM5LTY4LjI4NywzMS4wNjhjLTEyLjcwMywyMy45MTktOC4yMTEsNTQuMDMsMTAuOTE1LDczLjE1OGMxOC45OCwxOC45ODEsNDkuNzc0LDIzLjU3NCw3My4xMjksMTAuOTA4JiN4RDsmI3hBOwkJCQljMjQuMzM4LTEzLjE5OSwzOC4wMzctNDEuNTM3LDMxLjIyNy02OC4zNDljLTIuNDgzLTkuNzc1LTEuMTExLTE1Ljg4Miw1LjkzOC0yMi43NDVjMjUuNDk0LTI0LjgxOSw1MC42OTktNDkuOTQ5LDc1LjQ2Ni03NS40OTQmI3hEOyYjeEE7CQkJCWM2LjU2Mi02Ljc3LDEyLjI2NS03LjYxMiwyMS4xMy01LjEwM2MyOS41MTYsOC4zNTIsNjAuMjQ5LTYuMzAzLDcyLjUwNi0zMy40NDFjMTIuNzA4LTI4LjEzNiwzLjEzOS02MC43ODktMjIuOTQ3LTc4LjMxJiN4RDsmI3hBOwkJCQljLTI0LjM5NC0xNi4zODMtNTkuNzczLTE0LjUzOC03Ny4yMzEsOS44OTRjLTEzLjI1NiwxOC41NTQtMjguMTYzLDE5LjMwOC00Ni4zOCwxOC41MWMtNS4zODEtMC4yMzctMTAuODQtMC41NDQtMTYuMTYsMC4wNzEmI3hEOyYjeEE7CQkJCWMtMTAuMTY0LDEuMTc2LTE2LjIxOS0yLjQzLTIyLjE0Ny0xMS40MTRjLTEyLjc0MS0xOS4zMS0zMi4zMTItMjkuMjcxLTU1LjI2Mi0yNy4wODJDNDYuMjk4LDE5LjkxNSwyNy41MDIsMzMuMzQsMTcuOTgzLDU2LjkyJiN4RDsmI3hBOwkJCQljLTEyLjExNiwzMC4wMDksMS4xMTMsNjQuMDg3LDI5LjY0Myw3OC41MmMyOC43MTYsMTQuNTI3LDYyLjYxMiw0Ljg5MSw4MC42NDYtMjIuNjM4YzMuMDQ1LTQuNjQ4LDcuMDI5LTExLjkwMywxMC45ODQtMTIuMTgxJiN4RDsmI3hBOwkJCQlDMTU3Ljc1MSw5OS4zMjMsMTc2LjM4OCwxMDAuMDQ2LDE5NC45NzUsMTAwLjA0NnogTTQyOS43NjcsNDk2LjAyMWMyNi41NzYsMC4zNTQsNTEuNDE0LTE2Ljc3LDU5LjgyMy00MS4yNDImI3hEOyYjeEE7CQkJCWM5LjI1NS0yNi45MywwLjkwMy01NS4zNDktMjMuMjgzLTcxLjA1OGMtMTEuMzc5LTcuMzkyLTE2Ljc3NC0xNS4wODYtMTQuNzI5LTI4LjQ5OGMwLjk2Ni02LjMyNSwwLjkzMi0xMy4wMzEsMC4wMDctMTkuMzY5JiN4RDsmI3hBOwkJCQljLTEuOTQzLTEzLjMxOSwzLjI4MS0yMS4wMjYsMTQuNjEyLTI4LjYwM2MzMC44NTktMjAuNjM2LDM2LjE1LTYxLjY4MywxMy4wNjYtODkuMTE5Yy0yMy44MzQtMjguMzI5LTYzLjc3MS0zMS4zNDgtOTAuNDA5LTYuODM2JiN4RDsmI3hBOwkJCQljLTI3LjA2NiwyNC45MDgtMjguNTM0LDY4LjUxMywxLjQ3OSw5MC42ODRjMTguNjM2LDEzLjc2NywyMC43MiwyOC40OTEsMTkuMjMsNDcuNTEzYy0wLjIxLDIuNjgyLTAuMzMsNS40MzMsMC4wMjIsOC4wODImI3hEOyYjeEE7CQkJCWMxLjU2MywxMS43ODktMi4zNDcsMTguOTUzLTEzLjM4MywyNS43MjhjLTIzLjc0NCwxNC41NzUtMzIuNjM1LDQzLjA5NS0yNC41NjIsNjkuMjc5JiN4RDsmI3hBOwkJCQlDMzc5LjQ0Myw0NzcuODk3LDQwMy4yMjMsNDk1LjY2Nyw0MjkuNzY3LDQ5Ni4wMjF6IiAvPgkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMyLjQ1NSw0MTEuOTZjMjEuMDIxLDAsMzkuNjY5LDAuNjk3LDU4LjE4OC0wLjUyOSYjeEQ7JiN4QTsJCQkJYzQuMi0wLjI4LDguNjYzLTYuNzQzLDExLjgwMy0xMS4yMDZjMTYuODE0LTIzLjg5LDQ0LjA3MS0zMy43NjYsNzAuODA4LTI1LjE2OGMyNi4xNjYsOC40MTUsNDQuMTI5LDMzLjAxNSw0My42NDgsNTkuNzczJiN4RDsmI3hBOwkJCQljLTAuNTA2LDI4LjExMy0yMC4yMDgsNTIuNTg5LTQ4LjEsNTkuNzU2Yy0yNS40NDksNi41MzgtNTEuMjg0LTUuMDY1LTY4LjM0OS0yOS4wMzljLTMuNTY2LTUuMDEtMTEuMTc2LTcuODkyLTE3LjUwOS05Ljk0JiN4RDsmI3hBOwkJCQljLTQuODgyLTEuNTc5LTEwLjcwMS0wLjAyNy0xNi4wNzItMC4zNzNjLTE4LjYyLTEuMjAyLTMzLjQ0OSwwLjIxNS00NS45NTUsMTkuNTk3Yy0xNS43MywyNC4zODYtNTIuNjEzLDI3Ljg1Ni03Ny4xNDUsMTIuNjU4JiN4RDsmI3hBOwkJCQljLTI2LjE2NC0xNi4yMS0zNi45MS00Ny42NC0yNS45NzUtNzUuOTc4YzEwLjg4NS0yOC4yMDMsNDAuNTEtNDUuMjE0LDcwLjQ5NS0zNy43MjljMTIuNzY2LDMuMTg3LDE5Ljc2LTAuMzkzLDI3Ljg4OC04Ljc4NyYjeEQ7JiN4QTsJCQkJYzIzLjYyNS0yNC40MDYsNDguMzA1LTQ3LjgwMSw3MS41NzItNzIuNTM0YzQuNTAxLTQuNzg0LDcuMzQ3LTE0LjQwNSw2LjA2OC0yMC44MjFjLTkuMjcxLTQ2LjUyNSwyOS44Ni04NS4zMzUsNzUuODQ1LTc1LjEmI3hEOyYjeEE7CQkJCWM1LjkwOCwxLjMxMywxNS4wMjItMS4xMzIsMTkuMzg3LTUuMjc1YzI2LjE5Ni0yNC44NjMsNTEuNzcyLTUwLjQxNSw3Ni42NjQtNzYuNTg1YzQuMDI4LTQuMjM1LDYuNDAzLTEzLjU0NCw0Ljc2MS0xOS4wOTEmI3hEOyYjeEE7CQkJCWMtOC45ODMtMzAuMzQ1LDExLjAyMS03MC44NDYsNTMuNDY1LTc4LjA0N2MzMS4wNTEtNS4yNyw2NS4xODEsMjIuMDYzLDY5LjI1Myw1Ni4wMjhjNC4wNzQsMzMuOTkyLTI0LjI4Niw2Ni43MDEtNTkuOTQyLDY5LjA4OCYjeEQ7JiN4QTsJCQkJYy0yLjE0MywwLjE0NC00LjcyLDAuNjk0LTYuMzk4LTAuMjIxYy0yMC41NjctMTEuMjE0LTMyLjAwNiwxLjk5Mi00NC41NiwxNS4yNjVjLTIwLjM3LDIxLjUzOS00Mi4xOTgsNDEuNzAyLTYyLjQzOCw2My4zNTcmI3hEOyYjeEE7CQkJCWMtNC4wNTUsNC4zNC02LjMzNiwxMy4zMTItNS4wNTYsMTkuMTk0YzEwLjQ5Nyw0OC4yNjEtMjguNDcxLDg3LjUxMS03Ni42ODIsNzYuOTM1Yy01LjM0Mi0xLjE3Mi0xMy41NDEtMC43MTYtMTYuOTcsMi41NzMmI3hEOyYjeEE7CQkJCWMtMjguMzg3LDI3LjI1MS01NS45ODgsNTUuMzIzLTgzLjcyMyw4My4yNTFDMTM1Ljc3OCw0MDQuNjcyLDEzNS4wMzIsNDA3LjIzMSwxMzIuNDU1LDQxMS45NnoiIC8+CQkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOTQuOTc1LDEwMC4wNDZjLTE4LjU4NywwLTM3LjIyMy0wLjcyMy01NS43MTgsMC41NzYmI3hEOyYjeEE7CQkJCWMtMy45NTYsMC4yNzgtNy45MzksNy41MzMtMTAuOTg0LDEyLjE4MWMtMTguMDM0LDI3LjUyOS01MS45MywzNy4xNjUtODAuNjQ2LDIyLjYzOGMtMjguNTMtMTQuNDMzLTQxLjc1OS00OC41MTEtMjkuNjQzLTc4LjUyJiN4RDsmI3hBOwkJCQljOS41MTktMjMuNTgsMjguMzE0LTM3LjAwNSw1Mi45NjEtMzkuMzU2YzIyLjk1LTIuMTg5LDQyLjUyMSw3Ljc3Miw1NS4yNjIsMjcuMDgyYzUuOTI4LDguOTg0LDExLjk4MywxMi41OSwyMi4xNDcsMTEuNDE0JiN4RDsmI3hBOwkJCQljNS4zMi0wLjYxNSwxMC43NzktMC4zMDgsMTYuMTYtMC4wNzFjMTguMjE3LDAuNzk4LDMzLjEyNCwwLjA0NCw0Ni4zOC0xOC41MWMxNy40NTgtMjQuNDMyLDUyLjgzNy0yNi4yNzYsNzcuMjMxLTkuODk0JiN4RDsmI3hBOwkJCQljMjYuMDg2LDE3LjUyMSwzNS42NTUsNTAuMTc0LDIyLjk0Nyw3OC4zMWMtMTIuMjU3LDI3LjEzOC00Mi45OSw0MS43OTMtNzIuNTA2LDMzLjQ0MWMtOC44NjYtMi41MDktMTQuNTY4LTEuNjY3LTIxLjEzLDUuMTAzJiN4RDsmI3hBOwkJCQljLTI0Ljc2NywyNS41NDUtNDkuOTcyLDUwLjY3NS03NS40NjYsNzUuNDk0Yy03LjA0OSw2Ljg2My04LjQyMSwxMi45Ny01LjkzOCwyMi43NDVjNi44MTEsMjYuODEyLTYuODg4LDU1LjE0OS0zMS4yMjcsNjguMzQ5JiN4RDsmI3hBOwkJCQljLTIzLjM1NSwxMi42NjYtNTQuMTQ4LDguMDczLTczLjEyOS0xMC45MDhjLTE5LjEyNi0xOS4xMjgtMjMuNjE4LTQ5LjIzOC0xMC45MTUtNzMuMTU4JiN4RDsmI3hBOwkJCQljMTMuMDI4LTI0LjUzLDQwLjk2Ni0zOC4xOTIsNjguMjg3LTMxLjA2OGMxMS4yMjEsMi45MjYsMTcuODI4LDAuNTYyLDI1LjM2NC03LjIxMWMyMy42NC0yNC4zODIsNDcuOTQxLTQ4LjEyNSw3MS45MjEtNzIuMTgyJiN4RDsmI3hBOwkJCQljMy42NjgtMy42NzcsNi45ODktNy43MDEsMTAuNDY5LTExLjU2M0MxOTYuMTkzLDEwMy4zMDYsMTk1LjU4NSwxMDEuNjc2LDE5NC45NzUsMTAwLjA0NnoiIC8+CQkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MjkuNzY3LDQ5Ni4wMjFjLTI2LjU0NC0wLjM1NC01MC4zMjMtMTguMTI0LTU4LjEyNi00My40MzgmI3hEOyYjeEE7CQkJCWMtOC4wNzItMjYuMTg1LDAuODE4LTU0LjcwNCwyNC41NjItNjkuMjc5YzExLjAzNi02Ljc3NCwxNC45NDYtMTMuOTM4LDEzLjM4My0yNS43MjhjLTAuMzUzLTIuNjQ5LTAuMjMyLTUuNC0wLjAyMi04LjA4MiYjeEQ7JiN4QTsJCQkJYzEuNDg5LTE5LjAyMS0wLjU5NS0zMy43NDYtMTkuMjMtNDcuNTEzYy0zMC4wMTMtMjIuMTcxLTI4LjU0NS02NS43NzYtMS40NzktOTAuNjg0YzI2LjYzOC0yNC41MTIsNjYuNTc1LTIxLjQ5Myw5MC40MDksNi44MzYmI3hEOyYjeEE7CQkJCWMyMy4wODQsMjcuNDM2LDE3Ljc5Myw2OC40ODMtMTMuMDY2LDg5LjExOWMtMTEuMzMxLDcuNTc2LTE2LjU1NiwxNS4yODMtMTQuNjEyLDI4LjYwM2MwLjkyNSw2LjMzOCwwLjk1OSwxMy4wNDQtMC4wMDcsMTkuMzY5JiN4RDsmI3hBOwkJCQljLTIuMDQ2LDEzLjQxMiwzLjM1LDIxLjEwNiwxNC43MjksMjguNDk4YzI0LjE4NywxNS43MDksMzIuNTM4LDQ0LjEyOCwyMy4yODMsNzEuMDU4JiN4RDsmI3hBOwkJCQlDNDgxLjE4MSw0NzkuMjUyLDQ1Ni4zNDMsNDk2LjM3NSw0MjkuNzY3LDQ5Ni4wMjF6IiAvPgkJPC9nPgk8L2c+PC9nPjwvc3ZnPg==');
display: inline-block;
width: 200px;
height: 200px;
}
这适用于以前版本的Chrome以及当前版本的Safari和Firefox。
这是Chrome中的错误吗?或者是一些阻碍其运作的新政策变化?