Как изменить цвет SVG по умолчанию в MathJax-Node - PullRequest
0 голосов
/ 31 декабря 2018

Я использую MathJax-узел для генерации SVG-уравнений.Я хотел бы изменить цвет по умолчанию, но пока ничего не получилось.

Я посмотрел этот ответ и попробовал

mjAPI.config({MathJax: {
   styles: {
    ".MathJax_SVG, .MathJax_SVG_Display": {
      fill: "#FFF",
      stroke: "#FFF"
    }
  }}});

Я также попробовал

mjAPI.config({MathJax: {
   SVG: {color: "#0FF", fill: "#0F0", stroke: "#F00"}}});

и несколько вариантов, например, styles в SVG, но пока ничего не получалось.

Я могу обойти это, установив стиль из выражения TeX, но я бы предпочел иметь возможность установить конфигурацию по умолчанию, чтобы я мог обрабатывать выражения, не изменяя их.

1 Ответ

0 голосов
/ 31 декабря 2018

MathJax-узел упаковывает свой вывод в группу с fill="currentColor stroke="currentColor", чтобы он наследовал цвет от окружающего текста.Таким образом, один из способов изменить цвет - установить цвет контейнера, который будет содержать вывод SVG.Конфигурация, которую вы указали выше, будет делать это для MathJax в браузере, поскольку MathJax окружает свой SVG-вывод в контейнере с class="MathJax_SVG" или class="MathJax_SVG_Display";но MathJax-узел не создает контейнерные HTML-элементы, как это делает MathJax, поэтому нет генерируемых элементов с классом MathJax_SVG или MathJax_SVG_Display.В любом случае стили помещаются в таблицу стилей, которая будет добавлена ​​на страницу, а не для добавления явных стилей к сгенерированному SVG, поэтому вам придется включить эту таблицу стилей на страницу, где выводятся SVG-последовательности.чтобы ваша конфигурация имела эффект, даже если контейнеры с соответствующими классами были сгенерированы.

Однако вам, вероятно, нужно, чтобы вместо currentColor был какой-то определенный цвет, чтобынет наследования цветов.Поскольку SVG представляет собой текстовый формат изображения, вы можете сделать это, используя замену строки в файле драйвера узла mathjax.Например:

mjAPI.typeset({
  math: "x+1",
  format: "TeX",
  svg: true,
  useFontCache: false,
  ex: 6, width: 100
}, function (data) {
  if (!data.errors) {
    console.log(data.svg.replace(/"currentColor"/g, '"red"'));
  }
});

установит красный цвет на выходе.

...