Question

我正在使用vis.js库，大多数事情都可以正常工作。就像当我使用“ style”标签手动设置元素样式时一样，但是当我使用class属性时，样式不会应用。

SVG元素

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="420px" height="165px">
  <foreignObject x="0" y="0" width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml" style="background-color: #fff;height: 100%, width: 100%; display: flex; padding: 8px; border-radius: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); box-sizing: border-box;">
   // This doesn't work
   <div style="flex: 1;">
    <h1 class="testyh1">Report Id</h1>
    <h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">1</h2>
   </div>

   // This works
   <div style="flex: 1;">
    <h1 style="color: #0481E2; margin-top: 0; margin-bottom: 3px; font-size: 12px; line-height: normal;">Report Name</h1>
    <h2 style="margin: 0; font-size: 14px; font-weight: 400; line-height: normal;">Medicine-Stock</h2>
   </div>

  </div>
  </foreignObject>
  </svg>`;

CSS

.testyh1 {
  color: #0481E2;
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 12px;
  line-height: normal;
}

Answer 1

我使用样式标签，并使用脚本标签在HTML页面中更新这些标签：

<style type="text/css">
#mynetwork {
margin: auto;
width: 1000px;
height: 800px;
border: 1px solid lightgray;
}
</style>

CSS类不适用于svg元素

1 个答案: