Css 不使用jQuery的嵌入式SVG（带回退）

我需要一种方法1嵌入带有PNG回退的SVG，2在外部样式表中使用CSS在SVG的某些部分上设置颜色样式，而3不使用jQuery

背景： 在工作中，我们通过多个网站链接到服务器上的相同资源，因此，如果我们对资源进行了更新，就不必在20个网站上单独进行更新。使用外部样式表，这样我们就可以使资源在本例中SVG模仿我们放置它的任何网站的主题

我的解决方案： 我最初是用jQuery做的，但后来老板告诉我，我们需要一个简单的JS解决方案，因为他不想在一些旧网站上加载jQuery。这听起来很傻，但我不是老板

我最初使用的解决方案是：

解决方案3a。对于SVG回退，以及 用于嵌入SVG

<a href="link-to-another-page" >  
<img class="svg" src="awesome.svg" alt="An awesome SVG" width="186" height="235" onerror="this.removeAttribute('onerror'); this.src='not-as-awesome.png'" /> 
</a>  
<!--followed by the jQuery code in item #2-->

它工作得很好，但使用jQuery。我是一个JS初学者，因此尝试将jQuery代码转换为常规JS对我来说太令人困惑了

任何建议都会有帮助，但正如我所说，这需要：

可点击 不使用jQuery 允许在外部样式表中设置SVG样式

---

我建议你完全移除你的标签，并使用一些带有背景图像的标签

例如，您可以使用一些链接来代替：

<style>

.logo {
    display: inline-block;
    width: 400px;
    height: 200px;
    background-color: #some-color;
    background-image: url('url.png');
    background-image: url('url.svg'); //browsers that not support svg should ignore it completely and .png background would be applied and modern browsers would reassign background image
}

</style>

<a class="logo" href=""></a>

另一种方法是直接嵌入svg，因为它在html5中没有问题：

<style>

​svg {
    background: #f7f7f7;
    border: 1px solid #efefef;
}
​.logo {
    display:inline-block;
    width: 400px;
    height: 200px;
    background: yellow url('some iamge url here');
}​

</style>

<a class="logo" href="">
    <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1" baseProfile="full"
        width="100%" height="100%" viewBox="0 0 700 400">
        <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
    </svg>
</a>​

好在html5在应用display:block-to-link元素时没有问题，我认为内联块不应该有任何问题，因为你想用链接标签包装你的徽标，这应该是一个完美的解决方案，即使ie7在应用display:block-with-link元素时也没有问题，就像其他内联元素一样。我更喜欢第一种方法，因为它有更好的浏览器支持，您可以检查它并

附言 样式标记在html中没有位置，但我想大家都知道：

---

如果您不知道如何使用内联svg，只需打开inkscape，它有xml编辑器，在那里您可以复制svg并将其粘贴到html中。

我建议您完全删除标记，并使用一些带有背景图像的标记

例如，您可以使用一些链接来代替：

<style>

.logo {
    display: inline-block;
    width: 400px;
    height: 200px;
    background-color: #some-color;
    background-image: url('url.png');
    background-image: url('url.svg'); //browsers that not support svg should ignore it completely and .png background would be applied and modern browsers would reassign background image
}

</style>

<a class="logo" href=""></a>

另一种方法是直接嵌入svg，因为它在html5中没有问题：

<style>

​svg {
    background: #f7f7f7;
    border: 1px solid #efefef;
}
​.logo {
    display:inline-block;
    width: 400px;
    height: 200px;
    background: yellow url('some iamge url here');
}​

</style>

<a class="logo" href="">
    <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1" baseProfile="full"
        width="100%" height="100%" viewBox="0 0 700 400">
        <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
    </svg>
</a>​

好在html5在应用display:block-to-link元素时没有问题，我认为内联块不应该有任何问题，因为你想用链接标签包装你的徽标，这应该是一个完美的解决方案，即使ie7在应用display:block-with-link元素时也没有问题，就像其他内联元素一样。我更喜欢第一种方法，因为它有更好的浏览器支持，您可以检查它并

附言 样式标记在html中没有位置，但我想大家都知道：

---

如果您不知道如何使用内联svg，只需打开inkscape，它有xml编辑器，您可以在那里复制svg并将其粘贴到html中。

SVGeezy正是您想要的：

---

这是一个js文件，只需要几行代码就可以处理纯javascript中的位图回退。

SVGeezy正是您想要的：

---

这是一个js文件，只需要几行代码就可以处理纯javascript中的位图回退。

我可能也会使用背景图像，但我会使用它来设置SVG/PNG规则。这是一个好主意。我认为使用jquery时，您根本不需要javascript，我也会使用Modernizer：我应该补充一点，我们现在不使用HTML5。正如@orustammanapov所说，老板不想要jQuery，所以我也不能使用Modernizer，因为它依赖于jQuery。哦，向后兼容的乐趣。但我会尝试你的第一个解决方案，看看它是如何工作的。我只需要能够设计SVG元素的样式，我不确定应用于背景图像时该如何工作。谢谢你的帮助@user1889995 Modernizer没有依赖项。多背景解决方案有一个小小的缺点，它会导致更多GET请求，这对支持svg的浏览器来说是浪费。我可能也会使用背景图像，但我已经使用它设置了svg/PNG规则，这是一个很好的主意。我认为使用jquery时，您根本不需要javascript，我也会选择Modernizer：我应该补充一点，我们现在不使用HTML5。正如@orustammanapov所说，老板不想要jQuery，所以我也不能使用Modernizer，因为它依赖于jQuery。哦，向后兼容的乐趣。但我会尝试你的第一个解决方案，看看它是如何工作的。我只需要能够设计SVG元素的样式，我不确定应用于背景图像时该如何工作。谢谢你的帮助@user1889995 Modernizer没有依赖项。多背景解决方案有一个轻微的缺点，它会导致更多GET请求，这对支持svg的浏览器来说是浪费。