0
http://www.heropatterns.com/のSVGイメージをデータベースに格納しようとしていて、ユーザーがクリックしてdivの背景を設定することができる100X100pxの小さなブロックを印刷してループします。私はjquery、laravel、およびmysqlを使用しています。SVG背景イメージをDBに保存しますか？
私はCSSでうまく動作していますが、SVGを使用してそれを行う方法は私をエスケープします。 CSSのために働く
@foreach ($patterns as $pattern)
<?PHP
if ($pattern["type"] == "css"){
print('<div class="col-sm-1 patternItem" style="font-size:14px;text-shadow: 0px 0px 4px
rgb(0, 0, 0);color:#fff;position:relative;width:100px;height:100px;'. $pattern["pattern"] .'"><B> '. $pattern["name"] .'</B></div>');
}
?>
@endforeach
とJavaScript、：：これは私はCSSのために何をすべきかである私は、SVGコードをアンエスケープしようとしている
$(".patternItem").on("click", function(e){
patternData = $(this).attr("data-cssBackground");
gridItems = patternData.split(";");
$('.canvasItem').css({ "background-color": "", "background-size": "", "background-image": "", "background": "" })
for (i = 0; i < gridItems.length; i++) {
gridSettings = gridItems[i].split(":");
if (gridSettings[1] =='url(\\"data'){ //this is for SVG
gridSettings[1] = (gridSettings[1] + ":" + gridSettings[2] + gridSettings[3]);
}
$('[data-type="sliderLayer"]').css(gridSettings[0], gridSettings[1]);
}
});
、使用してそれを取り付けた後、別途、それをプリントアウトしてみましたjquery。 SVGコードには一重引用符と二重引用符が組み合わされていますが、少し複雑です。これをデータベースに保存し、バックグラウンドとして設定できる方法で返すためのヒントこのように、私はDBに格納し
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Ehoundstooth%3C/title%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 18h6l6-6v6h6l-6 6H0M24 18v6h-6M24 0l-6 6h-6l6-6M12 0v6L0 18v-6l6-6H0V0'/%3E%3C/g%3E%3C/svg%3E");