我正在嘗試通過樣式組件中的 css 來定位我的 svg 的填充屬性，但沒有成功。
這是我的svg
<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.8667V13.7334H6.83075H13.6615V6.8667V0H6.83075H0V6.8667ZM34.2257 6.8667V13.7334H41.0564H47.8872V6.8667V0H41.0564H34.2257V6.8667ZM9.47623 4.36809L9.4552 4.92533L8.50249 4.94546L7.54978 4.96542V7.44408V9.92256H6.83075H6.11173V7.44408V4.96542L5.15902 4.94546L4.20631 4.92533L4.18527 4.36809L4.16424 3.81084H6.83075H9.49726L9.47623 4.36809ZM41.9414 3.91815C45.0675 4.73227 45.0675 9.00113 41.9414 9.81525C41.6333 9.8956 41.1073 9.92256 39.8549 9.92256H38.1803V6.8667V3.81084H39.8549C41.1073 3.81084 41.6333 3.8378 41.9414 3.91815ZM17.1128 11.1809V18.0476H23.9436H30.7743V11.1809V4.31416H23.9436H17.1128V11.1809ZM51.3385 11.1809V18.0476H58.1693H65V11.1809V4.31416H58.1693H51.3385V11.1809ZM39.6184 6.8667V8.77212H40.4722C42.1033 8.77212 42.7981 8.20301 42.7981 6.8667C42.7981 5.53039 42.1033 4.96128 40.4722 4.96128H39.6184V6.8667ZM24.8519 8.15304C26.4692 8.58374 27.4607 10.08 27.1943 11.6878C26.6101 15.2135 21.1343 15.1689 20.6341 11.6344C20.3085 9.33458 22.4991 7.52659 24.8519 8.15304ZM59.0776 8.15304C60.6948 8.58374 61.6864 10.08 61.42 11.6878C60.8358 15.2135 55.36 15.1689 54.8598 11.6344C54.5342 9.33458 56.7247 7.52659 59.0776 8.15304ZM23.3477 9.37772C22.5318 9.5972 22.0475 10.3193 22.0862 11.2585C22.1877 13.7233 25.7723 13.6477 25.7723 11.1809C25.7723 9.86019 24.652 9.02701 23.3477 9.37772ZM57.5734 9.37772C56.7574 9.5972 56.2732 10.3193 56.3118 11.2585C56.4134 13.7233 59.9979 13.6477 59.9979 11.1809C59.9979 9.86019 58.8777 9.02701 57.5734 9.37772Z" fill="#1F1F2A"/>
</svg>
這就是我使用它的方式：
export const Logo = styled.svg`
background-image: url('./logo.svg');
background-repeat: no-repeat;
background-size: contain;
height: 2em;
& path {
fill: #a4a4bc;
}
@media ${devices.desktop}{
height: 3.4em;
}
`
這就是我匯入和使用它的方式
import {
Logo
} from '../styles/pages/home'
<LogoWrapper>
<Logo />
<legend>{formatter(homeContent[locale].title)}</legend>
</LogoWrapper>
我嘗試了其他變體來改變填充，但都沒有奏效。有任何想法嗎？
uj5u.com熱心網友回復：
使用 react-inlinesvg 我設法使它作業
import SVG from 'react-inlinesvg'
export const Logo = styled(SVG)`
& path {
fill: #a4a4bc;
}
@media ${devices.desktop}{
height: 3.4em;
}
`
uj5u.com熱心網友回復：
您應該從樣式中洗掉背景屬性，如背景影像。因為 svg 是一個向量，除非在特殊情況下，不需要再次為其設定影像。
您可以擴展 LogoWrapper 組件來設定 svg 影像的樣式，如下所示：
export const StyledLogoWrapper = styled(LogoWrapper)`
svg {
height: 2em;
& path {
fill: #a4a4bc;
}
@media ${devices.desktop}{
height: 3.4em;
}
}
`
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416914.html
標籤：
下一篇：畫布矩陣影片JS