在数据库中存储 SVG 背景图像？答案

【问题标题】：Store SVG Background Images in DB?在数据库中存储 SVG 背景图像？
【发布时间】：2017-09-09 21:49:39
【问题描述】：

我正在尝试将来自http://www.heropatterns.com/ 的 SVG 图像存储到数据库中，并循环打印用户可以单击设置 div 的背景的 100X100px 小块。我正在使用 jquery、laravel 和 mysql。

我让它在 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

还有适用于 CSS 的 Javascript：

 $(".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]);
        }
    });

我尝试取消转义 SVG 代码，尝试单独打印出来，然后使用 jquery 附加它。 SVG 代码中有单引号和双引号的组合，这使事情变得有些复杂。将其存储在数据库中并以可以设置为背景的方式返回它的任何提示？

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");

【问题讨论】：

标签： php jquery database svg

【解决方案1】：

我将它存储在数据库中是这样的：

<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'>
    <g fill-rule='evenodd'>
        <g fill='#F00' fill-opacity='0.4'>
            <path d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/>
        </g>
    </g>
</svg>

然后我将它即时转换为 base64 以便稍后渲染，以便对其进行操作。这是一个例子https://codepen.io/ajhalls/pen/qmEKVY

【讨论】：