我有一个基于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-index并在Div中将图像定位为图像来模拟背景SVG图像，但这并不是一个很好的解决方法。我想让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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句