【发布时间】:2020-03-07 05:27:00
【问题描述】:
我有一个 html 表格,我想绘制一个从一个单元格到另一个单元格的箭头。比如这样:
这是怎么做到的?
示例 HTML:
<html>
<body>
<table>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
<tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
</body>
</html>
如果您调整浏览器的大小,箭头应该停留在(新的)开始/结束位置。
【问题讨论】:
-
您自己尝试过吗?听起来这可以使用 javascript 和 css 完成
-
@AlexanderKludt 在这种情况下我不知道。我无法通过我最喜欢的搜索引擎找到有用的提示。
-
我们可以假设所有单元格的高度和宽度都像示例中一样吗?
-
...如果纵横比也已知,则可以仅使用 css(基于单元格 x,y 位置)并由作用于 css vars 的 js 函数控制。要使用选择器,必须探索其上下文以猜测函数中的那些坐标。不知道长宽比我还在考虑它......
-
@guettli 当然!但它不会是一个纯粹的 CSS 解决方案(甚至几乎),你需要检测大小变化并重新计算和注入 kinda aspect_ratio css var。这是合理的,但不如纯 css 解决方案那么美妙 ;-)
标签: javascript html svg