是否可以創建影片，其中Html標簽將遵循svg路徑影片？

我正在使用 svg 路徑在 javascript 中創建自定義進度影片。我從后端獲取有關應該移動多少路徑的資料。它作業正常，但在影片完成的地方，我需要一些帶有百分比的文本。我知道可以使用 svg 文本來實作，但這在樣式上是有限的。（我只能將它的樣式設定為 svg）所以我的問題是：是否可以創建影片，其中 Html 標記例如 p 將遵循 svg 路徑影片？或任何其他想法如何解決它？Svg 路徑沒有規則的形狀。

uj5u.com熱心網友回復：

我舉了兩個例子。第一個是“僅”使用 SVG 元素，下一個是<foreignObject>帶有 HTML 的<span>。

在此示例中，<text>將遵循影片運動路徑。必須更新屬性keyPoints和end以使文本遵循stroke-dasharray：

var path = document.getElementById('path');
var text = document.getElementById('text');
var motion = document.getElementById('motion');

document.forms.rangeform.range.addEventListener('change', e => {
  path.style.strokeDasharray = `${e.target.value} 100`;
  text.textContent = `${e.target.value}%`;
  motion.attributes['keyPoints'].value = `${e.target.value/100};${e.target.value/100}`;
  motion.attributes['end'].value = `${e.target.value}ms`;
});

<form name="rangeform">
  <input type="range" name="range" min="0" max="100" value="75">
</form>
<svg viewBox="0 0 120 80" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path2" d="M 10 50 C 20,50 25,30 50,30 S 80,50 80,50"
      pathLength="100" stroke-linecap="round" fill="none" />
  </defs>
  <use href="#path2" stroke-dasharray="none" stroke="lightblue" stroke-width="2" />
  <use href="#path2" id="path" stroke-dasharray="75 100" stroke-dashoffset="0"
    stroke="navy" stroke-width="4" />
  <text style="font-family:sans-serif;font-size:8px;font-weight:bold;"
    transform="translate(0 -5)">
    <tspan id="text">75%</tspan>
    <animateMotion id="motion" rotate="0" begin="0s" dur="100ms"
      end="75ms" keyPoints=".75;.75" keyTimes="0;1" fill="freeze">
      <mpath href="#path2"/>
    </animateMotion>
  </text>
</svg>

在這里，我用<foreignObject>. 為了讓它移動，我必須創建一個父元素 ( <g>)，因為我無法對它<foreignObject>本身做影片。

var path = document.getElementById('path');
var text = document.getElementById('text');
var motion = document.getElementById('motion');

document.forms.rangeform.range.addEventListener('change', e => {
  path.style.strokeDasharray = `${e.target.value} 100`;
  text.textContent = `${e.target.value}%`;
  motion.attributes['keyPoints'].value = `${e.target.value/100};${e.target.value/100}`;
  motion.attributes['end'].value = `${e.target.value}ms`;
});

span {
  font-size: 8px;
  font-family: sans-serif;
  font-weight: bold;
}

<form name="rangeform">
  <input type="range" name="range" min="0" max="100" value="75">
</form>
<svg viewBox="0 0 120 80" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path2" d="M 10 50 C 20,50 25,30 50,30 S 80,50 80,50"
      pathLength="100" stroke-linecap="round" fill="none" />
  </defs>
  <use href="#path2" stroke-dasharray="none" stroke="lightblue" stroke-width="2" />
  <use href="#path2" id="path" stroke-dasharray="75 100" stroke-dashoffset="0"
    stroke="navy" stroke-width="4" />
  <g>
    <foreignObject width="30" height="20" transform="translate(0 -20)">
      <span id="text" xmlns="http://www.w3.org/1999/xhtml">75%</span>
    </foreignObject>  
    <animateMotion id="motion" rotate="0" begin="0s" dur="100ms"
      end="75ms" keyPoints=".75;.75" keyTimes="0;1" fill="freeze">
      <mpath href="#path2"/>
    </animateMotion>
  </g>
</svg>

標籤：svg svg-动画

上一篇：相對于彼此放置SVG

下一篇：相對于其自身大小的偏移（使用變換）svg元素