Nano Hash - криптовалюты, майнинг, программирование

Как создать текстовый градиент с помощью snap.svg или svg.js

у меня есть этот свг

<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
    <linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
        <stop offset="0%" stop-color="#cbac62"/>
        <stop offset="100%" stop-color="#66481f"/>
    </linearGradient>
    <mask id="Sikjr46ql1nz">
        <text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
    </mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
    <text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
    <text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>

As it says in the svg code, it was created with snap. Here is the html tag used to generate the svg:

<span class="lol-text" style="display: none;">Pentakill</span>

Я предполагаю, что style="display: none;" был вставлен после создания svg.

Мне нужен пример того, как создать тот же svg из тега html, используя snap.svg или svg.js

Благодарю вас!

gradient svg.js snap.svg
12.02.2016

Ответы:


1

Snap.svg поможет вам создать графику, но он также может работать с существующим SVG. Это означает, что ваш SVG-контент не обязательно должен создаваться с помощью Snap.svg, вы также можете свободно манипулировать графикой. созданные с помощью таких инструментов, как Adobe Illustrator, Inkscape или Sketch.

Вот несколько примеров, которые вы также можете найти в демо-разделе их веб-сайта.

 <html>
 <head>
    <meta charset="utf-8" />
    <title>Sample snapsvg</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
   window.onload = function()
   {
     var snap = Snap(912,912);
     var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'}); 
   }
  </body>
  </html>

здесь вы можете увидеть вывод

ОБНОВЛЕНИЕ

если вы хотите узнать больше об этом на примере.

http://www.sitepoint.com/create-infographic-using-snap-svg/

12.02.2016
  • если вы посмотрите здесь ссылка, каждый тег h3 имеет svg в этом Я думаю, он каким-то образом генерируется автоматически, и каждый svg имеет уникальный случайный идентификатор, который, я уверен, не был вставлен вручную. Я хочу сделать то же самое на своем сайте без необходимости вручную редактировать каждый идентификатор, чтобы он был уникальным. 12.02.2016
  • извините, я вас не понимаю. 15.02.2016
  • Если вы ищете snap в этом js-файле, ссылка вы найдете множество слов-привязок и даже «Создано с помощью Snap», и если вы будете искать lol-текст, вы найдете в нижней части js-файла часть кода, используемого для создания svg. Я не знаю javascript, я знаю только, как изменить некоторые простые вещи из файла js и файла из минифицируемой ссылки, я действительно ничего не понимаю. 15.02.2016
  • тогда это даст некоторые основные идеи. 15.02.2016
  • Я использую joomla в качестве cms для публикации статей и копирования/вставки кода svg каждый раз, когда я использую тег h2 или h3, это не помогает. Я хочу знать, как мне добиться того же svg, который я разместил выше. И я уверен, что тот, кто сделал эту страницу ссылкой не вставлял svg туда вручную. Как мне этого добиться? 15.02.2016

    • 2

    Я много искал, чтобы найти то, что хотел, и я нашел именно то, что искал.

    Вот код и пример: текстовый градиент, сгенерированный с помощью snap.svg

    19.02.2016
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..