文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在react中打印SVG元素中的列表？

问如何在react中打印SVG元素中的列表？
EN

Stack Overflow用户

提问于 2017-07-20 12:39:49

回答 1查看 171关注 0票数 1

我正在尝试在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

Stack Overflow用户

回答已采纳

发布于 2017-07-20 13:05:28

您可以使用foreignObject在SVG中嵌入超文本标记语言。

您可以使用jQuery来操作HTML属性和附加foreignObject，比如您的列表。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45205299

复制

相似问题

问如何在react中打印SVG元素中的列表？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react中打印SVG元素中的列表？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react中打印SVG元素中的列表？
EN