Divのインライン背景画像として機能しないSVG

私は複雑なJquery-UIベースのダイアログを持っており、SVG画像をバックグラウンドとして提供したいと思います。私はこの作業を最初に単純なテストファイルにしようとしましたが、スタンドアロンイメージとしてのSVGはうまく動作しますが、動作しません。ここでは単純化されたコードです：Divのインライン背景画像として機能しない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の潜在的な可能性が完全に実現される時期が来たと思います。

出典

2016-01-05 Sam

base64にする必要がありますか？通常の画像のように外部からsvgにリンクするだけではありませんか？ 'background：url（../ images/fancy.svg）' svgが動的でない場合は、通常のファイルとして管理する方が簡単です。 – Lex

@Lex私はそれをインラインにしたいので、JSで動的に変更することができます。 – Sam

＃あなたが＃23で置き換えられているのを見て、あなたがしなかった＃を脱出しようとしています。 – uzma

これは別の方法です。あなたはあなたの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>

EDIT 追加オプスのグラデーションカラー：下記の例を参照してください。 - url()周り'を削除し、それはそれはdoesnの

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

出典

2016-01-05 14:23:50

これは私が参照している[post]（http://stackoverflow.com/questions/10768451/inline-svg-in-css）で受け入れられている回答ですが、Jqueryを追加しました。私の問題は、SVGイメージと一緒に使用することです。SVGイメージでも使用されますが、SVGイメージでも使用されますが、SVGでは使用されません。 SVGがうまく機能する私のSVGで動作しない理由を知りたいですが、スタンドアローンではありません。あなたは確かにいくつかの努力をしているので、私は答えをupvotingです...ありがとう – Sam

@サム私は私の答えを更新しました。 JavaScriptの構文に問題があります。 –

私はSVGに失敗したタイプミスを特定したので上記の答えを受け入れましたが、この問題に対する私の解決策はより一般的です。 SVGを背景として適用しようとするとき、背景グラデーションを拡大/縮小する必要があります。 spreadMethodオプションは役に立ちません。私はこれを行うためにDIV idと勾配パラメータを取る簡単な関数を作成しました。次に、DIVの幅/高さを取り出し、SVGを構築してbackgroundImage CSSに適用します。これはバックグラウンドのスケーリングに関して100％完全な証明です。 SVGの "S"はすべての状況に当てはまるわけではありません。 – Sam

あなたはここで説明するように、base64エンコードを使用していない試みることができる：

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

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

しかし、あなただけのグラデーションをしたい場合は、あなただけのCSSの背景画像を使用することができますの直鎖グラデーション（青、白）の構文。

出典

2016-01-05 13:51:40 KWeiss

私が言いました投稿の受け入れられた答えです。私はそれを試しましたが、うまくいきません。その古いポスト。また、URLエスケープするSVGコンテンツについても説明します。私はあなたから提供されたリファレンスを詳しく見ていきます。 – Sam

私は、SVGコンテンツの有無にかかわらずURLエスケープを試みました。私は、私が参照したポストで同様の受け入れられた回答に与えられた例はうまくいくが、私のSVGでは失敗することがわかった。 – Sam

それは純粋なSVG（ラファエルのようなライブラリなしの）グラデーションは、CSSの背景画像、線形勾配よりブラウザでサポートされていると言うことは間違いありませんか？ – Sam

動作するはず

変更style='fill:'url(#grad1)'; stroke-width:3;'style='fill:url(#grad1);stroke-width:3;'へ：

問題は構文であります仕事ルート<svg>にxmlns:xlink="http://www.w3.org/1999/xlink"が足りないためです。

私はスタンドアロンの.svgファイルとして実行してみましたが、Namespace prefix xlink for href on ... is not definedというエラーが出て、this questionになりました。

出典

2017-10-04 10:45:50 Nadroev

Divのインライン背景画像として機能しないSVG

答えて

関連する問題