如何在反应中打印 SVG 元素中的列表？答案

【问题标题】：How do I print a list in an SVG element in react?如何在反应中打印 SVG 元素中的列表？
【发布时间】：2017-12-25 14:17:13
【问题描述】：

我正在尝试在 React 中打印一个矩形元素内的列表。目前，列表在矩形上方正确打印（所以我知道在项目周围包含 li 标签等所有内容都正确格式化），矩形在其下方打印。文本“Title Here”在框中正确打印。问题是列表必须由状态表示，并且大小未知。如何在矩形内打印此列表？

<div>
        <ul>{this.state.ListText}</ul>
            <svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
                <defs>
                    <linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
                        <stop stopColor="#9198A1" offset="0%"></stop>
                        <stop stopColor="#888D95" offset="100%"></stop>
                    </linearGradient>
                    <rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
                </defs>
                <g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
                        <g id="Medications" transform="translate(732.000000, 106.000000)">
                            <g id="Rectangle-7">
                                <use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
                            </g>
                            <text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000">
                                <tspan x="165" y="39">Title Here</tspan>
                            </text>
                        </g>
                    </g>
                </g>
            </svg>
        </div>

【问题讨论】：

标签： javascript jquery reactjs svg frontend

【解决方案1】：

您可以使用foreignObject 在您的 SVG 中嵌入 HTML。

您可以使用 jQuery 操作 foreignObject DOM 属性并附加 HTML，例如您的列表。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>{this.state.ListText}</ul>
  <span id='cont'>
            <svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
                <defs>
                    <linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
                        <stop stopColor="#9198A1" offset="0%"></stop>
                        <stop stopColor="#888D95" offset="100%"></stop>
                    </linearGradient>
                    <rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
                </defs>
                <g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
                        <g id="Medications" transform="translate(732.000000, 106.000000)">
                            <g id="Rectangle-7">
                                <use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
                            </g>
                            <text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000" >
                                <tspan x="165" y="39">Title Here</tspan>
                    
    
                            </text>
                       <foreignObject width="100" height="300"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
                           <body xmlns="http://www.w3.org/1999/xhtml">
                               <p>Here is my list</p>
                           </body>
                       </foreignObject>
                        </g>
                    </g>
                </g>
            </svg>
            </span>
</div>
<script>
  var ul = $('<ul>');
  ["Item 1", "Item 2", "Item 3"].forEach(function(item) {
    ul.append($("<li>").text(item));

  });
  $('foreignObject').append(ul);
  $('foreignObject body').append(ul);
</script>

【讨论】：