HTML

void ES3DScene::handlePickerClicked(QPickEvent *pick)
{
    float *temperature = nullptr;
    QPickTriangleEvent *trianglePick = qobject_cast<QPickTriangleEvent*>(pick);
    auto idx = trianglePick->vertex1Index();

    QGeometry *geometry = m_mesh->geometry();
    for (QAttribute* attribute : geometry->attributes())
    {
        if (attribute->name() == "vertexTemperature")
        {
            temperature = extractVertexData<float*>(attribute, idx);

            break;
        }
    }
}

CSS

<div class="root">
  <div >
    <div>This</div>
    <div>content</div>
    <div>determines</div>
    <div>the</div>
    <div>height</div>
    <div>of</div>
    <div>the</div>
    <div>SVG</div>
  </div>
  <svg width="50px" viewBox="0 0 20 20" preserveAspectRatio = "none slice">
    <!-- I want do draw a down arrow here that spans the whole height, but only the length of the line should be variable, the arrow should not scale -->
    <line x1="10" y1="0" x2="10" y2="20" stroke="black" stroke-width="2"/>
    <line x1="0" y1="15" x2="10" y2="20" stroke="black" stroke-width="1"/>
    <line x1="20" y1="15" x2="10" y2="20" stroke="black" stroke-width="1"/>
  </svg>
</div>

如何对代码进行调整，以使箭头的线条变得更长，因为左边的内容变得更长，但没有头部拉伸？

Answer 1

您可以使用SVG <use>技巧。

定义一个箭头，其箭头位于y = 0处。然后使用<use>宽度y="100%"引用它，以便在SVG的最大Y（底部）重新定位。

＆＃13;

.root {
  display: flex;
}


svg {
  background: lightblue;
}

＆＃13;

<div class="root">
  <div >
    <div>This</div>
    <div>content</div>
    <div>determines</div>
    <div>the</div>
    <div>height</div>
    <div>of</div>
    <div>the</div>
    <div>SVG</div>
    <div>SVG</div>
    <div>SVG</div>
    <div>SVG</div>
    <div>SVG</div>
  </div>
  <svg width="50px">
    <defs>
      <polyline id="arrow-head"
                points="3,-15, 25,-2.5 47,-15"
                fill="none" stroke="black" stroke-width="5"/>
    </defs>
    <line x1="50%" y1="0" x2="50%" y2="100%"
          stroke="black" stroke-width="5" stroke-dasharray="10 5"/>
    <use y="100%" xlink:href="#arrow-head"/>
  </svg>
</div>

＆＃13;

Answer 2

我想最简单的方法是遵循最小惊喜的原则，将垂直线和箭头放在单独的SVG元素中并叠加它们。

为了允许使用虚线笔划而不缩放破折号，我可以使用

vector-effect="non-scaling-stroke"

在<line/>元素上。

保持问题可能提供更好的建议。

具有动态高度的SVG，无需缩放

HTML

CSS

2 个答案: