SVG作为Div的内联背景图像不起作用
SVG as inline background image of a Div is not working
我有一个复杂的基于Jquery UI的对话框,我想提供一个SVG图像作为背景。我首先尝试在一个简单的测试文件中实现这一点,但它不起作用,尽管SVG作为一个独立的图像运行良好。这是简化的代码:
<script>
$(document).ready(function () {
svg = "<svg width='400' height='400' fill='url(#grad1)' '
xmlns='http://www.w3.org/2000/svg'> <rect id='bkgrect' width='400' '
height='400' style='fill:'url(#grad1)'; stroke-width:3;'/> <defs>'
<linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'> '
<stop id='stop1' offset='0%' stop-color='blue'/> <stop offset='100%' '
stop-color='white'/> </linearGradient> </defs> </svg>";
svgBase64 = btoa(svg);
bkgrndImg = "url('data:image/svg+xml;base64,"+ svgBase64 +"')";
$('#testDiv').css('background-image', bkgrndImg);
});
</script>
</head>
<body>
<div id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;"> Some SVG Div </div>
<svg ... /svg>
svg/svg与后台使用的svg相同,并且显示正确。
在研究了各种解决方案后,我主要依赖于这篇文章。我还试图通过使用z索引来模拟背景SVG图像,并将图像定位在Div中作为图像,但这不是一个好的解决方案。我想让SVG作为背景图像在浏览器中顺利工作,因为至少SVG渐变在所有现代浏览器中都得到了很好的支持,我认为SVG的潜力终于实现了。
这里有一个替代方案。您可以使用CSS类,然后在Javascript中只需更改其类即可在不同背景之间切换。参见以下示例:
$('button').click(function() {
$('#testDiv').toggleClass('gradient1 gradient2');
});
.gradient1 {
background: #4e8ef7 url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjk2YWQ0IiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ZThlZjciIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
background-size: contain;
}
.gradient2 {
background: #7962ff url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2ZiYWUyIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3OTYyZmYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change gradient</button>
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>
或
$('button').click(function() {
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#EEE'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change gradient</button>
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>
编辑添加了OP渐变色。
语法问题:
将style='fill:'url(#grad1)'; stroke-width:3;'
更改为style='fill:url(#grad1);stroke-width:3;'
——移除url()
周围的'
,它应该可以使用
$(document).ready(function() {
var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' fill='url(#grad1)'><rect id='bkgrect' width='400' height='400' style='fill:url(#grad1);stroke-width:3;' /><linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'><stop offset='0%' stop-color='blue'/><stop offset='100%' stop-color='white'/> </linearGradient><rect fill='url(#grad1)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='testDiv' style="border:2px solid red;width:400px;height:400px;
position:absolute;left:100px;top:100px;">Some SVG Div</div>
在此处阅读有关样式属性的更多信息
您可以尝试不使用base64编码,如下所述:
https://css-tricks.com/probably-dont-base64-svg/
.bg {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
然而,如果你只想要渐变,你可以使用CSS背景图像:线性渐变(蓝色,白色)语法。
它不起作用,因为根<svg>
元素上缺少xmlns:xlink="http://www.w3.org/1999/xlink"
。
我尝试将我的文件作为一个独立的.svg
文件运行,但得到了错误Namespace prefix xlink for href on ... is not defined
,这让我产生了这个问题。
- 可以在这里为背景图像设置滤镜吗
- 使用 js 将背景图像设置为 HTML
- 如何使用css动画/javascript使具有背景图像的元素出现
- 循环浏览多个身体背景图像
- 背景图像顶部的滚动图像不移动
- 在pdfmake中嵌入背景图像
- 修复选择菜单时的背景图像
- 使用css()设置背景图像;不起作用
- 鼠标悬停时如何居中放大背景图像
- 强制谷歌为javascript背景图像编制索引
- 淡入不带HTML的背景图像
- 具有淡入淡出效果的全背景图像
- 未加载随机背景图像
- 背景图像前显示Javascript警报
- javascript背景图像位置循环
- CSS动画背景图像的过渡越来越暗
- "Ken Burns效应”;悬停背景图像
- 通过ID JavaScript显示随机背景图像
- JavaScript背景图像
- 带有图像和背景图像的ClipTo