为什么我的SVG路径中的marker-start没有显示在浏览器中(但是在生成的PNG中)?

时间:2017-04-23 19:54:37

标签: svg

有人可以告诉我,为什么以下文件中的左箭头在生成的PNG中正确显示,但在浏览器中没有显示?

https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg

在Firefox中它不在那里,在Chrome中我看到它指向右下方而不是左侧。

这是两个标记:

<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
    <path d="M 13 0  C 13 0, 10 5, 13 10   L 13 10  L 0 5" fill="red"/>
</marker>

我的解决方案基于以下提示:

#include <iostream>
#include <vector>
#include <stdexcept>

class Matrix
{

private:

    class RowIterator
    {
    public:
        RowIterator(Matrix* mat, int rowNum) :_mat(mat), _rowNum(rowNum) {}
        double& operator[] (int colNum) { return _mat->_data[_rowNum*_mat->_sizeX + colNum]; }
    private:
        Matrix* _mat;
        int _rowNum;
    };

    int _sizeY, _sizeX;
    std::vector<double> _data;

public:

    Matrix(int sizeY, int sizeX) : _sizeY(sizeY), _sizeX(sizeX), _data(_sizeY*_sizeX){}
    Matrix(std::vector<std::vector<double> > initList) : _sizeY(initList.size()), _sizeX(_sizeY>0 ? initList.begin()->size() : 0), _data()
    { 
        _data.reserve(_sizeY*_sizeX);
        for (const std::vector<double>& list : initList)
        {
            _data.insert(_data.end(), list.begin(), list.end());
        }
    }

    RowIterator operator[] (int rowNum) { return RowIterator(this, rowNum); }

    int getSize() { return _sizeX*_sizeY; }
    int getSizeX() { return _sizeX; }
    int getSizeY() { return _sizeY; }

    Matrix reduce(int rowNum, int colNum)
    {
        Matrix mat(_sizeY-1, _sizeX-1);
        int rowRem = 0;
        for (int y = 0; y < _sizeY; y++)
        {
            if (rowNum == y)
            {
                rowRem = 1;
                continue;
            }
            int colRem = 0;
            for (int x = 0; x < _sizeX; x++)
            {
                if (colNum == x)
                {
                    colRem = 1;
                    continue;
                }
                mat[y - rowRem][x - colRem] = (*this)[y][x];
            }
        }
        return mat;
    }

    Matrix replaceCol(int colNum, std::vector<double> newCol)
    {
        Matrix mat = *this;
        for (int y = 0; y < _sizeY; y++)
        {
            mat[y][colNum] = newCol[y];
        }
        return mat;
    }

};

double solveMatrix(Matrix mat)
{
    if (mat.getSizeX() != mat.getSizeY()) throw std::invalid_argument("Not square matrix");
    if (mat.getSize() > 1)
    {
        double sum = 0.0;
        int sign = 1;
        for (int x = 0; x < mat.getSizeX(); x++)
        {
            sum += sign * mat[0][x] * solveMatrix(mat.reduce(0, x));
            sign = -sign;
        }
        return sum;
    }

    return mat[0][0];
}

std::vector<double> solveEq(std::vector< std::pair<double, double> > points)
{
    std::vector<std::vector<double> > xes(points.size());
    for (int i = 0; i<points.size(); i++)
    {
        xes[i].push_back(1);
        for (int j = 1; j<points.size(); j++)
        {
            xes[i].push_back(xes[i].back() * points[i].first);
        }
    }

    Matrix mat(xes);

    std::vector<double> ys(points.size());

    for (int i = 0; i < points.size(); i++)
    {
        ys[i] = points[i].second;
    }

    double w = solveMatrix(mat);

    std::vector<double> result(points.size(), 0.0);

    if(w!=0)
        for (int i = 0; i < ys.size(); i++)
        {
            result[i] = solveMatrix(mat.replaceCol(i, ys));
            result[i] /= w;
        }

    return result;
}

void printCoe(std::vector<double> coe)
{
    std::cout << "f(x)=";
    bool notFirstSign = false;
    for (int i = coe.size() - 1; i >= 0; i--)
    {
        if (coe[i] != 0.0)
        {
            if (coe[i] >= 0.0 && notFirstSign)
                std::cout << "+";
            notFirstSign = true;
            if (coe[i] != 1.0)
                if (coe[i] == -1.0)
                    std::cout << "-";
                else
                    std::cout << coe[i];
            if (i == 1)
                std::cout << "x";
            if (i>1)
                std::cout << "x^" << i;
        }
    }
    std::cout << std::endl;
}

int main()
{
    std::vector< std::pair<double, double> > points1 = { {3,31}, {6,94}, {4,48}, {0,4} };
    std::vector<double> coe = solveEq(points1);
    printCoe(coe);

    std::vector< std::pair<double, double> > points2 = { { 0,0 },{ 1,-1 },{ 2,-16 },{ 3,-81 },{ 4,-256 } };
    printCoe(solveEq(points2));

    printCoe(solveEq({ { 0,0 },{ 1,1 },{ 2,8 },{ 3,27 } }));

    std::cin.ignore();
    return 0;
}

所以我改变了实际路径。我所有试图反映它的尝试都失败了,所以对我来说这是最好的解决方案。

这是我付诸行动的地方,BTW:https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube

1 个答案:

答案 0 :(得分:1)

带有negative width and height is invalid的viewBox。无效视图框的内容不会呈现。

如果Chrome以任何方式呈现arrowstart,那就是Chrome错误。无论你使用什么png发生器,显然也是错误的。

这是获得两端箭头的一种方法,至少在支持orient =“auto-start-reverse”的浏览器上

<svg  width="500" height="300" viewBox="0 0 200 50">
    <defs>
        <marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
            <path d="M 0 0  C 0 0, 3 5, 0 10   L 0 10  L 13 5" fill="red"/>
        </marker>
    </defs>

    <line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/>

</svg>