如何在响应中打印SVG元素中的列表?

时间:2017-07-20 04:39:49

标签: javascript jquery reactjs svg frontend

我正在尝试在React中打印矩形元素内的列表。目前,列表正确打印(所以我知道在矩形上方正确格式化项目周围的li标签等),矩形打印在它下面。文字"标题在这里"在盒子里面正确打印。问题是列表必须由状态表示,并且大小未知。如何在矩形内打印此列表?

<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>

1 个答案:

答案 0 :(得分:0)

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

您可以使用jQuery来操作FragmentPagerItems DOM属性并附加HTML等列表。

&#13;
&#13;
foreignObject
&#13;
&#13;
&#13;