我正在按照教程（現在有點過時）來創建 SVG 影片，但遇到了 stroke-dasharray - 我正在定義它，但沒有看到任何效果。我為此使用 Codepen。
.container {
background-color: black;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.path-1 {
stroke-dasharray: 4;
}<div class="container">
<div class="animation-wrap">
<svg class="logo" width="324" height="47" viewBox="0 0 324 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M59.992 1.392L47.064 46H40.536L30.168 10.096L19.416 46L12.952 46.064L0.472 1.392H6.68L16.408 39.216L27.16 1.392H33.688L43.928 39.088L53.72 1.392H59.992Z" fill="white"/>
<path class="path-1" d="M72.1895 6.128V21.04H88.4455V25.84H72.1895V41.2H90.3655V46H66.3655V1.328H90.3655V6.128H72.1895Z" fill="white"/>
<path d="M122.666 46L112.042 27.76H105.002V46H99.178V1.392H113.578C116.949 1.392 119.786 1.968 122.09 3.12C124.437 4.272 126.186 5.82933 127.338 7.792C128.49 9.75467 129.066 11.9947 129.066 14.512C129.066 17.584 128.17 20.2933 126.378 22.64C124.629 24.9867 121.983 26.544 118.442 27.312L129.642 46H122.666ZM105.002 23.088H113.578C116.735 23.088 119.103 22.32 120.682 20.784C122.261 19.2053 123.05 17.1147 123.05 14.512C123.05 11.8667 122.261 9.81867 120.682 8.368C119.146 6.91733 116.778 6.192 113.578 6.192H105.002V23.088Z" fill="white"/>
<path d="M158.34 46.448C154.201 46.448 150.425 45.488 147.012 43.568C143.598 41.6053 140.889 38.896 138.883 35.44C136.921 31.9413 135.939 28.016 135.939 23.664C135.939 19.312 136.921 15.408 138.883 11.952C140.889 8.45333 143.598 5.744 147.012 3.824C150.425 1.86133 154.201 0.879997 158.34 0.879997C162.521 0.879997 166.318 1.86133 169.732 3.824C173.145 5.744 175.833 8.432 177.796 11.888C179.758 15.344 180.74 19.2693 180.74 23.664C180.74 28.0587 179.758 31.984 177.796 35.44C175.833 38.896 173.145 41.6053 169.732 43.568C166.318 45.488 162.521 46.448 158.34 46.448ZM158.34 41.392C161.454 41.392 164.249 40.6667 166.724 39.216C169.241 37.7653 171.204 35.696 172.612 33.008C174.062 30.32 174.788 27.2053 174.788 23.664C174.788 20.08 174.062 16.9653 172.612 14.32C171.204 11.632 169.262 9.56267 166.788 8.112C164.313 6.66133 161.497 5.936 158.34 5.936C155.182 5.936 152.366 6.66133 149.891 8.112C147.417 9.56267 145.454 11.632 144.003 14.32C142.595 16.9653 141.891 20.08 141.891 23.664C141.891 27.2053 142.595 30.32 144.003 33.008C145.454 35.696 147.417 37.7653 149.891 39.216C152.409 40.6667 155.225 41.392 158.34 41.392Z" fill="white"/>
<path d="M223.5 46H217.676L194.252 10.48V46H188.428V1.328H194.252L217.676 36.784V1.328H223.5V46Z" fill="white"/>
<path d="M239.252 1.392V46H233.428V1.392H239.252Z" fill="white"/>
<path d="M273.37 46L255.002 25.648V46H249.178V1.392H255.002V22.064L273.434 1.392H280.794L260.57 23.728L280.986 46H273.37Z" fill="white"/>
<path d="M313.858 36.08H294.402L290.818 46H284.675L300.803 1.648H307.522L323.587 46H317.443L313.858 36.08ZM312.194 31.344L304.131 8.816L296.066 31.344H312.194Z" fill="white"/>
</svg>
</div>
</div>我嘗試了什么：
- 將像素值應用于 stroke-dasharray
- 針對教程添加一個 stroke 屬性（做了一些但不是我想要的，即虛線文本）
- 檢查我是否將其應用于 ，這似乎解決了其他人在 Stack Overflow 上的帖子
- 將填充值更改為#fff，以防填充需要十六進制值
uj5u.com熱心網友回復：
您需要設定筆畫才能使 stroke-dasharray 生效。例如，stroke="red"。
顧名思義，它只適用于描邊，對填充沒有影響。
.container {
background-color: black;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.path-1 {
stroke-dasharray: 4;
stroke: red;
}<div class="container">
<div class="animation-wrap">
<svg class="logo" width="324" height="47" viewBox="0 0 324 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M59.992 1.392L47.064 46H40.536L30.168 10.096L19.416 46L12.952 46.064L0.472 1.392H6.68L16.408 39.216L27.16 1.392H33.688L43.928 39.088L53.72 1.392H59.992Z" fill="white"/>
<path class="path-1" d="M72.1895 6.128V21.04H88.4455V25.84H72.1895V41.2H90.3655V46H66.3655V1.328H90.3655V6.128H72.1895Z" fill="white"/>
<path d="M122.666 46L112.042 27.76H105.002V46H99.178V1.392H113.578C116.949 1.392 119.786 1.968 122.09 3.12C124.437 4.272 126.186 5.82933 127.338 7.792C128.49 9.75467 129.066 11.9947 129.066 14.512C129.066 17.584 128.17 20.2933 126.378 22.64C124.629 24.9867 121.983 26.544 118.442 27.312L129.642 46H122.666ZM105.002 23.088H113.578C116.735 23.088 119.103 22.32 120.682 20.784C122.261 19.2053 123.05 17.1147 123.05 14.512C123.05 11.8667 122.261 9.81867 120.682 8.368C119.146 6.91733 116.778 6.192 113.578 6.192H105.002V23.088Z" fill="white"/>
<path d="M158.34 46.448C154.201 46.448 150.425 45.488 147.012 43.568C143.598 41.6053 140.889 38.896 138.883 35.44C136.921 31.9413 135.939 28.016 135.939 23.664C135.939 19.312 136.921 15.408 138.883 11.952C140.889 8.45333 143.598 5.744 147.012 3.824C150.425 1.86133 154.201 0.879997 158.34 0.879997C162.521 0.879997 166.318 1.86133 169.732 3.824C173.145 5.744 175.833 8.432 177.796 11.888C179.758 15.344 180.74 19.2693 180.74 23.664C180.74 28.0587 179.758 31.984 177.796 35.44C175.833 38.896 173.145 41.6053 169.732 43.568C166.318 45.488 162.521 46.448 158.34 46.448ZM158.34 41.392C161.454 41.392 164.249 40.6667 166.724 39.216C169.241 37.7653 171.204 35.696 172.612 33.008C174.062 30.32 174.788 27.2053 174.788 23.664C174.788 20.08 174.062 16.9653 172.612 14.32C171.204 11.632 169.262 9.56267 166.788 8.112C164.313 6.66133 161.497 5.936 158.34 5.936C155.182 5.936 152.366 6.66133 149.891 8.112C147.417 9.56267 145.454 11.632 144.003 14.32C142.595 16.9653 141.891 20.08 141.891 23.664C141.891 27.2053 142.595 30.32 144.003 33.008C145.454 35.696 147.417 37.7653 149.891 39.216C152.409 40.6667 155.225 41.392 158.34 41.392Z" fill="white"/>
<path d="M223.5 46H217.676L194.252 10.48V46H188.428V1.328H194.252L217.676 36.784V1.328H223.5V46Z" fill="white"/>
<path d="M239.252 1.392V46H233.428V1.392H239.252Z" fill="white"/>
<path d="M273.37 46L255.002 25.648V46H249.178V1.392H255.002V22.064L273.434 1.392H280.794L260.57 23.728L280.986 46H273.37Z" fill="white"/>
<path d="M313.858 36.08H294.402L290.818 46H284.675L300.803 1.648H307.522L323.587 46H317.443L313.858 36.08ZM312.194 31.344L304.131 8.816L296.066 31.344H312.194Z" fill="white"/>
</svg>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516165.html