2

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

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

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

我使用的原始解决方案：

  1. http://www.noupe.com/tutorial/svg-clickable-71346.html（解决方案 3a.）用于 SVG 后备，以及

  2. 如何使用 CSS（jQuery SVG 图像替换）更改 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 对我来说太混乱了。

任何建议都会有所帮助，但就像我说的，这需要：

  1. 可点击
  2. 不使用 jQuery
  3. 允许在外部样式表中使用 SVG 样式
4

2 回答 2

2

我建议您<img/>完全删除您的标签并使用一些带有背景图片的标签

例如，您可以改用一些链接：

<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 元素时没有问题我认为inline-block不应该有任何问题，因为你想用链接标签包装你的徽标，即使 ie7 没有问题，它也应该是完美的解决方案应用 display: 与其他内联元素一样的带有链接元素的块。我更喜欢第一种方法，因为它具有更好的浏览器支持，您可以检查它嵌入内联 SVG和SVG 作为背景图像

PS 样式标签在您的 html 中没有位置，但我想每个人都知道：) 如果您不知道如何使用内联 svg，只需打开带有 xml 编辑器的inkscape，您就可以复制您的 svg 并将其粘贴到 html 中。

于 2012-12-09T21:22:56.590 回答
2

SVGeezy 正是您正在寻找的：

https://github.com/benhowdle89/svgeezy

这是一个 js 文件，只有几行处理纯 javascript 中的位图回退。

于 2012-12-09T22:17:35.813 回答