Question

我想做的是，

我正在wordpress中创建动态时间轴。

我使用bootstrap 4创建了一个跟随marckup并在居中列中添加了一个svg行。

<div class="container">

    <div class="row">

        <div class="col-md-4">

            <div class="left-content-1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

            </div>

            <div class="left-content-2">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

            </div>


        </div>

        <div class="col-md-4">
<!-- Just an example svg trimmed to include in SO character limit. -->
            <?xml version="1.0" encoding="utf-8"?>
                <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 382.1 7866" style="enable-background:new 0 0 382.1 7866;" xml:space="preserve">

                    <g>
                        <path class="st0" d="M242.3,526.1c4,5.8,4,18.3-0.4,23.3c-1.3,1.4-4,2.4-5.9,2.2c-1.7-0.2-3.9-2.1-4.5-3.7
            C229,541.4,235.5,528.8,242.3,526.1z" />
                        <path class="st0" d="M227.2,0c7.1,3.3,13.1,14,11.5,21.1c-0.4,1.8-2.8,4.3-4.3,4.4c-2.2,0.1-5.2-1.1-6.6-2.8
            C224.5,18.7,222.9,6,227.2,0z" />
                        <path class="st0" d="M310.7,6161.1c3.7,8.7,3.6,16.4-0.6,23.6c-1,1.7-4.9,3-7,2.6c-1.7-0.4-3.9-3.7-3.9-5.7
            C299.2,6173.2,303.1,6166.7,310.7,6161.1z" />
                        <path class="st0" d="M101.1,2291c7.5,5.8,11.7,12.2,11.6,20.8c0,1.9-2.1,5.2-3.7,5.5c-2.3,0.4-6.1-0.7-7.1-2.4
            C97.6,2307.7,97.5,2299.9,101.1,2291z" />
                        <path class="st0" d="M196.5,6550c3.9,6.3,3.9,18.1-0.6,23.1c-1.4,1.6-4.6,2.6-6.8,2.3c-1.6-0.2-3.6-2.8-4-4.7
            C184,6564.5,189.6,6552.5,196.5,6550z" />
                    </g>

                </svg>

        </div>

        <div class="col-md-4">

            <div class="content-1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

            </div>

            <div class="content-2">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

            </div>

        </div>

    </div>

</div>

我想为我的内容div找到最近的svg路径并添加一个橙色的圆形子弹。（如时间轴起点）。

我尝试使用document.elementFromPoint（left，top）来获取最近的svg节点，但是无法使其工作。

var leftContent1 = $('svg').position().left;
var elem = document.elementFromPoint(320, 100) // x, y

console.log(elem);

由于内容高度可能会有所不同，我想在正确位置添加橙色点。请指导我一个正确的方法来实现这一目标。我不太擅长jquery。

在svg路径中的固定点到达时添加新的svg路径

0 个答案: