堆栈内存溢出
  简体   繁体   English

SVG 到 HTML 路径

[英]SVG to HTML Path

 原文  2022-05-28 10:29:17  9   1    javascript/ html/ css/ path/ sag

问题描述

this is my code:这是我的代码： 

 <div className="Aktiendashboard-AllgemeineInfo-container"> <Tabs value={value} onChange={handleChange} aria-label="icon label tabs example"> <Tab icon={ <SvgIcon> **<path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />** </SvgIcon>} label="Company" value="Company"/> <Tab icon={ <SvgIcon> Put SVG Inside this </SvgIcon>} label="Company" value="Company"/> <Tab icon={<PersonPinIcon />} label="Charts" value="Charts" /> <Tab icon={<ApartmentIcon />} label="Valuation" value="Valuation" /> <Tab icon={<CalculateIcon />} label="Dividende" value="Dividende" /> <Tab icon={<PersonSearchIcon />} label="Eigentum" value="Eigentum" /> </Tabs> </div>

i have some problems with .svg icons.我对 .svg 图标有一些问题。 The first icon is an arrow () and it fits very well.第一个图标是一个箭头 ()，它非常适合。

But when I want to insert a different svg path it doesn't work.但是当我想插入不同的 svg 路径时它不起作用。 For example this svg path:例如这个 svg 路径： 

 <?xml version="1.0" encoding="UTF-8"?> <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"> <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/> <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/> <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/> <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/> </svg>

Can u help me how I can implement the svg path to my code?你能帮我如何实现我的代码的svg路径吗？ I want to insert the svg path from the second code snippet into the "Put SVG inside This" line.我想将第二个代码片段中的 svg 路径插入“将 SVG 放入此”行中。 It doesn't show up anything yet它还没有显示任何东西

Thanks and have a great weekend谢谢，周末愉快

1 个解决方案

解决方案1
 2  2022-05-28 13:44:52

if you can use html如果你可以使用 html

      <Tab icon={ <SvgIcon>
        <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
          <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
          <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
          <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
        </svg>
      </SvgIcon>}

if you can use react如果你可以使用反应

          <Tab icon={ <SvgIcon>
            <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
              <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fillRule="evenodd"/>
              <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fillRule="evenodd"/>
              <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fillRule="evenodd"/>
            </svg>
          </SvgIcon>}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在html中为弧绘制SVG路径 - How to draw SVG path for arc in html 将SVG路径转换为canvas html5 - Transform SVG path to canvas html5 鼠标悬停在SVG路径上的HTML工具提示 - HTML Tooltip On Mouse Over SVG Path svg svg折线的路径 - svg path to svg polyline 更改 HTML 文档的一部分的相对路径基础，尤其是对于注入的 SVG？ - Change relative path base for part of an HTML document, especially for injected SVG? 有没有办法使用 HTML 和 CSS 在 SVG 路径上制作滚动选框？ - Is there a way to make a scrolling marquee on a SVG path using HTML and CSS? 标题 HTML 元素通过 JS 附加到 SVG 路径未显示 - Title HTML elements appended to an SVG path via JS not showing 使用javascript在SVG路径上跟随HTML元素 - HTML elements following each other along SVG path with javascript 使用 JavaScript 在 HTML 中创建样式文本节点的 SVG 轮廓路径 - Creating SVG outline path of a styled text node in HTML using JavaScript 如何将带有路径的 SVG 嵌入到从 src 获取的 Html 中？ - How to embed SVG with Path into Html taken from a src?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM