Question

查看Foundation 5的_forms.scss，我看到这个代码在表单元素上生成三角形：

background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');

这会生成一个黑色的三角形（对我的口味来说有点小），我想自定义它。

我知道我可以使用css background-size属性调整大小，但我想知道是否有办法可以改变三角形的颜色？
- 我是否需要重新生成base64编码的svg + xml？
- 如果是的话，有没有好的工具可供生成？

作为旁注，有没有建议扩展Foundation 5 .scss以便能够使用scss $变量来设置颜色？

Answer 1

如果您对该值进行64位解码，您将获得以下SVG数据。

＆＃13;

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        x="0px"
        y="0px"
        width="6px"
        height="3px"
        viewBox="0 0 6 3"
        enable-background="new 0 0 6 3"
        xml:space="preserve"
    >
        <polygon points="5.992,0 2.992,3 -0.008,0" />
    </svg>

＆＃13;

例如，如果您希望将颜色更改为红色，则会为polygon添加style属性和fill声明。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    x="0px"
    y="0px"
    width="6px"
    height="3px"
    viewBox="0 0 6 3"
    enable-background="new 0 0 6 3"
    xml:space="preserve"
>
    <!-- red triangle -->
    <polygon
        points="5.992,0 2.992,3 -0.008,0"
        style="fill:red;"
    />
</svg>

＆＃13;

然后将其编码回base64。您可以使用任何在线服务，例如base64decode.org，或使用您所选语言的功能，例如Javascript或PHP等

SVG元素也可以使用CSS设置样式，并具有类和id属性。（虽然我不确定它是否适用于base64编码元素。）

如何更改Foundation 5的颜色<select>下拉三角形</select>

1 个答案: