svg填充颜色覆盖文本颜色

时间：2018-06-01 19:57:55

标签： svg

我试图在我的页面上设置我的SVG标签样式。我希望背景为红色，顶部带有白色文字。我能够将填充颜色变为红色，但是当我更改＆＃34;填充＆＃34;对于文本，它会发生变化，但会被＆＃34; fill＆＃34;为背景。 

.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 ')

1 个答案:

答案 0 :(得分：0)

嗯，我觉得很傻。我所要做的只是改变'points'和'text'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
相关问题
最新问题