WordPress Block.js SVG createElement

时间：2019-10-28 作者：Vil Ignoble

我用以下代码创建了一个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>
我使用以下模板为块中的块创建svg图标。我的插件的js文件：

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 } );
 };
我需要知道如何使用svg编码标准将以下内容添加到createElement中，作为svg图像、标题、定义、样式、文本amazon中的元素，并在文本之间使用tspans。我在示例中有文本createElement，但在将文本amazon与tspans作为文本元素的二级层次结构进行编码时遇到了问题。最后，数据名属性不符合数据和名称之间的连字符，如何将数据名属性添加到svg元素？

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

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

属性名称具有特殊字符，如hypen/-, 名称应放在单引号/双引号中：例如。\'data-name\' 不仅仅是data-name.

createElement( \'svg\', {
    \'data-name\': \'Layer 1\' // like this
    data-name: \'Layer 1\'   // not this
} );
  • 属性名称也是一样的class 这是一个reserved JavaScript word/identifier.

    createElement( \'text\', {
    \'class\': \'cls-1\'   // use quotes
    className: \'cls-1\' // or use className
} );
  • createElement() 可以接受嵌套的子元素，如下所示。。（要获得深入的解释/指南，请询问/搜索Stack Overflow等网站）

    createElement( \'ul\', null,
    createElement( \'li\', null, \'One\' ),
    createElement( \'li\', null,
        createElement( \'b\', null, \'Two\' )
    ),
    createElement( \'li\', null, \'Three\' )
);
/* Output:
<ul><li>One</li><li><b>Two</b></li><li>Three</li></ul>
*/


    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 Overflow之类的网站上询问这样的问题（这实际上是针对JavaScript而不是WordPress的）。是的，上面的代码看起来很可怕（或复杂）。。因此，建议您在代码中使用JSX，但不要忘记build the script 用于生产用途&mdash；一开始建造可能很难，但相信我，它最终会变得很容易：）

    • 标签： javascript   svg   小码农  

    相关推荐

    通过unctions.php在纯javascript中安装GTM

    GTM documentation 表示包含两个片段，1个在后面<head> 开始标记和1之后<body> 打开标签。最初，我是在孩子的标题中添加代码片段。php文件。我想放弃这个方法，改用纯JS，主要是因为父主题更新。我编写了下面的代码以在函数中使用。php，但它不起作用，我不知道我做错了什么。Edit : 我得到的错误是Uncaught TypeError: Cannot read property \'insertBefore\' of null 对于document.bod