css - 响应式 SVG 文本路径包装动态内容

Question

我正在尝试用动画 SVG 文本路径包裹一个新闻 block (宽度和高度会有所不同)。到目前为止我得到了这个:

	#canvas{
	height: 100vh;
	width: 100vw;
	}
	.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

 <div class="svg-container">
    <svg id="canvas" version="1.1"  viewBox="0 0 500 500">  
        <path width="100%"  id="curve" fill="none" d="M0,0 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" />
        <text font-family="Helvetica" font-size="20" fill="black">
            <textPath xlink:href="#curve" startOffset="0%" id="text">Last News</textPath>
        <animate xlink:href="#text" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
        </text>
    </svg>
    </div>

工作动画: https://jsfiddle.net/xebfjL1p/

这将是子内容:

<div class="lastnews">
    <div class="post-grid">

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Short title</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>

        <a class="post-link" href="#">
        <div class="post">
            <img src="https://via.placeholder.com/768x461.png">
            <h2>Some very long long title with too many words</h2>
        </div>
        </a>            

    </div>
</div>

我找到了一些使 svg 响应的方法，但是是否可以使 svg 路径适应 div 子内容？

这是我想要得到的结果:

提前谢谢

Answer 1

我会这样做:我将带有文本的 div 和 svg 放在同一个父 position:relative 中。 .text-container 具有绝对位置并位于 svg 元素之上。

此外，.text-container 具有宽度，但 height:auto 因为内容是动态的。

您将需要 .text-container 的大小，并使用它来计算 svg 元素的新 viewBox 和 d 的新值#curve

的属性

let txtCont = document.querySelector(".text-container");
// get the size of the text container
let box = txtCont.getBoundingClientRect()

//set the new viewBox of the svg element
canvas.setAttributeNS(null,"viewBox",`-50 -30 310 ${box.height}`)
//set the new d attribute of the curve
curve.setAttributeNS(null,"d", `M0,0 h200 a20,20 0 0 1 20,20 v${box.height  - 100} a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-${box.height - 100} a20,20 0 0 1 20,-20 z`)

#wrap {
  height: auto;
  width: 300px;
  margin: 0;
  padding: 0;
  position: relative;
}
.text-container {
  box-sizing: border-box;
  padding: 30px 50px;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}
#canvas {
  border: 1px solid;
  margin: 0;
}

<div id="wrap">
    <svg id="canvas"  viewBox="-50 -30 310 310">  
        <path width="100%"  id="curve" fill="none" stroke="gold" d="" />
        <text font-family="Helvetica" font-size="20" fill="black">
            <textPath xlink:href="#curve" startOffset="0%" id="text">Last News</textPath>
        <animate xlink:href="#text" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
        </text>
    </svg>

<div class="text-container">
  <p>I'm trying to wrap a block of news (which will vary on width & height) with an animated SVG textpath around it. I got this so far</p>
  </div>
</div>

请更改.text-container的文本以查看动画变化。