动态SVG与file.css

waxmsbnn 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(103)

Level Crossing
我想用css创建一个关卡动态。最后一点是第一个图像。在ST-01中，我想要第二个图像，在ST-02中，我想要第三个图像。

<g transform="translate(50 150) scale(1.2 1)" class="Box-ST00" stroke="none" fill="none">
    <rect width="150" height="10"/>
</g>
<g transform="translate(90 30) scale(1.2 1) rotate(90)" class="Box-ST00" stroke="none" fill="none">
    <rect width="150" height="10" transform="scale(1.2 1) rotate(-50)" />
</g>

使用file.css如下：
/* 框STATE 00-无 / .黑色;填充：黑色;笔划宽度：var（--boxes_stroke_width_small）}
/ 框STATE 01-白色 */ .白色;填充：白色;笔划宽度：var（--boxes_stroke_width_small）}
我尝试了这种方式，我得到的水平交叉完全填充或没有。有人有主意吗？

css

来源：https://stackoverflow.com/questions/76287821/dynamic-svg-with-file-css

1条答案

按热度按时间

pengsaosao1#

看着你的截图，我真的不知道你要获得的形状。但首先我会删除你的变换 * 缩放样式 *（因为我看不到重点）和你想在CSS端重新定义的属性（stroke & fill）。我还改变了颜色，以区分笔触和填充，然后我把“1px”的笔触宽度风格，而不是你的css变量，因为它没有在你的例子中定义。
所以应该是这样的：

<svg>
  <g transform="translate(100 140)" class="Box-ST00">
    <rect width="150" height="10"/>
  </g>
  <g transform="translate(90 150) rotate(0)" class="Box-ST00">
    <rect width="150" height="10" transform="rotate(-90)" />
  </g>
</svg

<style>
  .Box-ST00 { stroke: black; fill: #ccc; stroke-width: 1px }
  .Box-ST01 { stroke: black; fill: #ccc ; stroke-width: 1px }
</style>

赞(0）回复(0）举报 2023-05-23

我来回答

动态SVG与file.css

1条答案

相关问题

热门标签

最新问答