Wordpress Block.js SVG createElement

Question

我创建了一个svg映像，并以下面的代码为例：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.79 38.77">
<defs>
<style>.cls-1{font-size:35.66px;font-family:MyriadPro-Regular, Myriad Pro;}.cls-2{letter-spacing:-0.01em;}.cls-3{fill:#d39e09;}</style>
</defs>
<title>Amazon</title>
<text class="cls-1" transform="translate(0 29.85) scale(0.79 1)">ama<tspan class="cls-2" x="64.12" y="0">z</tspan><tspan x="79.14" y="0">on</tspan></text>
<path class="cls-3" d="M12.37,57c19.45,4.55,44,6.77,70.34,0,3-.77,6-1.64,8.79-2.58" transform="translate(-3.46 -23.53)"/>
</svg>

我使用以下模板为插件的block.js文件中的块创建svg图标：

var Amazon = function () {
        var svg = createElement( 'svg', { id: 'Layer_1', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 93.79 38.77' },
            createElement( 'text', { class: 'cls-1', transform: 'translate(0 29.85) scale(0.79 1)' } ), 
            createElement( 'path', { class: 'cls-3', d: 'M12.37,57c19.45,4.55,44,6.77,70.34,0,3-.77,6-1.64,8.79-2.58', transform: 'translate(-3.46 -23.53)' } )
        );
        return createElement( wp.components.Icon, { icon: svg } );
 };

我需要知道如何将以下内容添加到createElement中，并使用svg编码标准作为svg图像、标题、防御、样式和文本之间的文本亚马逊的元素。我在示例中使用文本createElement，但是在将文本amazon作为文本元素的二级层次结构时，使用tspans编写文本是有困难的。最后，data-name属性不符合数据和名称之间的连字符，如何将data-name属性添加到svg元素中？

Answer 1

基本上，当使用wp.element.createElement()时，

1. 对于具有特殊字符(如hypen/- )的属性名称，名称应该放在单引号/双引号中:例如，'data-name'，而不是简单的data-name。createElement( 'svg'，{ 'data-name'：'Layer 1‘//类似于这个数据-名称：'Layer 1’//不是this } )；
2. 属性名(如class )也是如此，这是一个保留JavaScript字/标识符。createElement( 'text'，{‘class’‘：'cls-1’//使用引号className：'cls-1‘/或使用className } )；
3. createElement()可以接受嵌套的子元素，如下所示。(关于深度解释/指南，请询问/搜索诸如堆栈溢出之类的站点) createElement( 'ul'，null，createElement( 'li'，null，'One‘)，createElement( 'li'，null，createElement( 'b'，null，’2‘)，createElement( 'li'，null，’3‘)；/*输出:/* */

因此，对于问题中的SVG标记，如下所示：

var Amazon = function () {
    var svg = createElement("svg", {
        id: "Layer_1",
        // attributes having special characters in the name should be wrapped in quotes
        "data-name": "Layer 1",
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 93.79 38.77"
    }, createElement("defs", null, createElement("style", null, ".cls-1{font-size:35.66px;font-family:MyriadPro-Regular, Myriad Pro;} .cls-2{letter-spacing:-0.01em;} .cls-3{fill:#d39e09;}")), createElement("title", null, "Amazon"), createElement("text", {
        // for the `class` attribute, use className; or wrap the name in quotes ('class')
        'class': "cls-1",
        transform: "translate(0 29.85) scale(0.79 1)"
    }, "ama", createElement("tspan", {
        'class': "cls-2",
        x: "64.12",
        y: "0"
    }, "z"), createElement("tspan", {
        x: "79.14",
        y: "0"
    }, "on")), createElement("path", {
        'class': "cls-3",
        d: "M12.37,57c19.45,4.55,44,6.77,70.34,0,3-.77,6-1.64,8.79-2.58",
        transform: "translate(-3.46 -23.53)"
    }));
    return createElement( wp.components.Icon, { icon: svg } );
};

我希望这会有所帮助，下一次尝试在类似Stack溢出的站点上询问类似这样的问题(这实际上是针对JavaScript而不是WordPress的)。是的，上面的代码看起来很吓人(或者很复杂)。因此，建议您在代码中使用JSX，但不要忘记使用构建脚本进行生产使用--一开始构建可能很困难，但相信我，最终会变得很容易。:)