Question

我有一个复杂的基于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相同，显示正确。

在查看各种解决方案后，我主要依赖于this帖子。我还试图通过使用z-index模拟背景SVG图像并将Div中的图像定位为图像，但这不是一个好的修复。我想让SVG作为背景图像在浏览器中顺利运行，因为至少SVG渐变在所有现代浏览器中得到了很好的支持，我认为SVG的潜力得到充分实现的时间终于到了。

Answer 1

您可以尝试不使用base64编码，如下所述：

https://css-tricks.com/probably-dont-base64-svg/

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

但是，如果你只想要渐变，你可以使用CSS background-image：linear-gradient（蓝色，白色）语法。

Answer 2

这是另一种选择。您可以在Javascript中使用CSS类，只需更改其类即可在不同背景之间切换。见下面的例子：

$('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>

Read more here about styling properties

Answer 3

它不起作用，因为您在根xmlns:xlink="http://www.w3.org/1999/xlink"元素上缺少<svg>。

我尝试将我的文件作为一个独立的.svg文件运行，并收到错误Namespace prefix xlink for href on ... is not defined，这导致我this question。

SVG作为Div的内联背景图像不起作用

3 个答案: