svg - svg 填充颜色 覆盖文本颜色
问题描述
我正在尝试在我的页面上设置我的 SVG 贴纸的样式。我希望背景为红色,顶部为白色文字。我能够将填充颜色变为红色,但是当我更改文本的“填充”时,它会更改但被背景的“填充”覆盖。
.sale-sticker.hide-for-small-only
a(href="")
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/', x='0px', y='0px', width='100%', height='100%', viewbox='0 0 157.5 157.5', style='enable-background:new 0 0 157.5 157.5;', xml:space='preserve')
style(type='text/css').
.st1 {
fill: #FF3A1E;
stroke: #FF3A1E;
stroke-width: 2;
stroke-miterlimit: 10;
}
.sale-copy {
font-size: 20px;
font-weight: 600;
}
.sale-price-svg {
font-size: 20px;
font-weight: 600;
color: #fff;
}
.sale-price-9 {
font-size: 55px;
font-weight: 700;
}
defs
text(x="50%", y="50%", fill="#FFFFFF")
if (/^(en-gb|fr)$/.test(prefLocale))
if locale == "fr"
tspan(class="sale-copy", x="30%", y="40%") !{ __("homepage.sale_sticker_svg")}
else
tspan(class="sale-copy", x="35%", y="40%") !{ __("homepage.sale_sticker_svg")}
tspan(class="sale-price-svg", x="25%", y="60%") £
tspan(y="75%", class="sale-price-9") 9
tspan(class="sale-price-svg", y="60%") .95
else
if locale == "fr"
tspan(class="sale-copy", x="30%", y="40%") !{ __("homepage.sale_sticker_svg")}
else
tspan(class="sale-copy", x="35%", y="40%") !{ __("homepage.sale_sticker_svg")}
tspan(class="sale-price-svg", x="25%", y="60%") $
tspan(y="75%", class="sale-price-9") 9
tspan(class="sale-price-svg", y="60%") .95
polygon.st1(points='78.8,1.7 84.2,9 90.8,2.6 95.1,10.8 102.6,5.4 105.5,14.2 113.7,10.1 115.3,19.1 124.1,16.4 \
124.2,25.6 133.3,24.3 131.9,33.3 141.1,33.4 138.4,42.2 147.4,43.8 143.4,52 152.1,54.9 146.7,62.4 154.9,66.7 148.5,73.3 \
155.8,78.8 148.5,84.2 154.9,90.8 146.7,95.1 152.1,102.6 143.4,105.5 147.4,113.7 138.4,115.3 141.1,124.1 131.9,124.2 \
133.3,133.3 124.2,131.9 124.1,141.1 115.3,138.4 113.7,147.4 105.5,143.4 102.6,152.1 95.1,146.7 90.8,154.9 84.2,148.5 \
78.8,155.8 73.3,148.5 66.7,154.9 62.4,146.7 54.9,152.1 52,143.4 43.8,147.4 42.2,138.4 33.4,141.1 33.3,131.9 24.3,133.3 \
25.6,124.2 16.4,124.1 19.1,115.3 10.1,113.7 14.2,105.5 5.4,102.6 10.8,95.1 2.6,90.8 9,84.2 1.7,78.8 9,73.3 2.6,66.7 10.8,62.4 \
5.4,54.9 14.2,52 10.1,43.8 19.1,42.2 16.4,33.4 25.6,33.3 24.3,24.3 33.3,25.6 33.4,16.4 42.2,19.1 43.8,10.1 52,14.2 54.9,5.4 \
62.4,10.8 66.7,2.6 73.3,9 ')
解决方案
嗯,我觉得很傻。我所要做的就是更改“点”和“文本”div 的顺序,以便之后阅读文本并解决我的问题。
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/', x='0px', y='0px', width='100%', height='100%', viewbox='0 0 157.5 157.5', style='enable-background:new 0 0 157.5 157.5;', xml:space='preserve')
style(type='text/css').
.st1 {
fill: #ff3a1e;
stroke: #ff3a1e;
stroke-width: 2;
stroke-miterlimit: 10;
}
.sale-copy {
font-size: 20px;
font-weight: 600;
fill: #fff;
}
.sale-price-svg {
font-size: 20px;
font-weight: 600;
}
.sale-price-9 {
font-size: 55px;
font-weight: 700;
}
defs
polygon.st1(points='78.8,1.7 84.2,9 90.8,2.6 95.1,10.8 102.6,5.4 105.5,14.2 113.7,10.1 115.3,19.1 124.1,16.4 \
124.2,25.6 133.3,24.3 131.9,33.3 141.1,33.4 138.4,42.2 147.4,43.8 143.4,52 152.1,54.9 146.7,62.4 154.9,66.7 148.5,73.3 \
155.8,78.8 148.5,84.2 154.9,90.8 146.7,95.1 152.1,102.6 143.4,105.5 147.4,113.7 138.4,115.3 141.1,124.1 131.9,124.2 \
133.3,133.3 124.2,131.9 124.1,141.1 115.3,138.4 113.7,147.4 105.5,143.4 102.6,152.1 95.1,146.7 90.8,154.9 84.2,148.5 \
78.8,155.8 73.3,148.5 66.7,154.9 62.4,146.7 54.9,152.1 52,143.4 43.8,147.4 42.2,138.4 33.4,141.1 33.3,131.9 24.3,133.3 \
25.6,124.2 16.4,124.1 19.1,115.3 10.1,113.7 14.2,105.5 5.4,102.6 10.8,95.1 2.6,90.8 9,84.2 1.7,78.8 9,73.3 2.6,66.7 10.8,62.4 \
5.4,54.9 14.2,52 10.1,43.8 19.1,42.2 16.4,33.4 25.6,33.3 24.3,24.3 33.3,25.6 33.4,16.4 42.2,19.1 43.8,10.1 52,14.2 54.9,5.4 \
62.4,10.8 66.7,2.6 73.3,9 ')
text(x="50%", y="50%", fill="#FFFFFF")
if (/^(en-gb|fr)$/.test(prefLocale))
if locale == "fr"
tspan(class="sale-copy", x="30%", y="40%") !{ __("homepage.sale_sticker_svg")}
else
tspan(class="sale-copy", x="35%", y="40%") !{ __("homepage.sale_sticker_svg")}
tspan(class="sale-price-svg", x="25%", y="60%") £
tspan(y="75%", class="sale-price-9") 9
tspan(class="sale-price-svg", y="60%") .95
else
if locale == "fr"
tspan(class="sale-copy", x="30%", y="40%") !{ __("homepage.sale_sticker_svg")}
else
tspan(class="sale-copy", x="35%", y="40%") !{ __("homepage.sale_sticker_svg")}
tspan(class="sale-price-svg", x="25%", y="60%") $
tspan(y="75%", class="sale-price-9") 9
tspan(class="sale-price-svg", y="60%") .95
推荐阅读
- angular - 有没有办法将文件和表单组发布到我的 API?
- codeigniter - Codeigniter 创建带有 url_title 结果的阿拉伯语 slug ??????? 在数据库中
- powershell - Powershell的登录方法
- wpf - 如何使用 WPF 中的触发器更改边框颜色?
- firebase - 说一下如何修复 fcm 服务器代码中的 java.lang.NoClassDefFoundError: com/google/api/core/ApiFutur
- jquery - CodeIgniter - AJAX 注册表单验证
- angular - 如何修复 SyntaxError:位置 0 处 JSON 中的意外标记 b
- amazon-web-services - 如何在使用 lambda@edge 调整图像大小时修复访问被拒绝错误
- html - 如果用户的系统字体大小增加,网页会变得太大(即字体大小:Windows 推荐的 150%)
- python - For循环迭代类列表属性