Question

我正在尝试将来自http://www.heropatterns.com/的SVG图像存储到数据库中并循环打印小的100X100px块，用户可以点击这些块来设置div的背景。我正在使用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

Javascript，适用于CSS：

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

Answer 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

的示例

在SV中存储SVG背景图像？

1 个答案: