1 Тема від cheappi386

  • cheappi386
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.08.2015
  • Повідомлень: 1 142
    • Репутація: 380

Тема: 3D ефекти у SVG

Читаю ось це http://www.graphicalweb.net/2008/papers … _with_SVG/
Й не можу зрозуміти як працює 3й приклад. Випуклість це добре, але як зробити впуклість ?

Подякували: Chemist-i1

2 Відповідь від ch0r_t Востаннє редагувалося ch0r_t (26.08.2021 19:15:17)

  • ch0r_t
  • Ibi nullus timet mortem.
  • Поза форумом
  • Дата реєстрації: 04.11.2020
  • Повідомлень: 1 944
    • Репутація: 1200

Re: 3D ефекти у SVG

Якось отак? (Звісно нашвидкоруч. Краще виправити освітлення/затінення.)
https://replace.org.ua/uploads/images/10563/7ecef59a0bfe8bfd726189f9ad37a696.png
https://replace.org.ua/uploads/images/10563/3bb0884dd1e1fe92efbe1abd81b2771e.png


▼Прихований текст
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#000000" offset="0.24"/>
      <stop stop-color="#434343" offset="0.76"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0.0" stop-opacity="0.0"/>
      <stop stop-color="#888888" offset="0.4" stop-opacity="0.2"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="dark-grey"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- virtual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"
    comp-op="hard-light"/>
</svg>

Відповідь у тому як воно власне виглядає, в реальності, в тому як падає світло. На практиці, більш менш пристойний ефект для таких простих штук - інвертувати градієнт світлого. Зверніть увагу на "грань/обрамлення" навколо кнопки - частина ілюзії, вона підказує що світло падає зверху, тоді як поверхня що видається втиснутою, розповідає що світло туди не потрапило - злам, заглиблення, -так підсилено ефект. Просто, але справу свою робить.-->

https://replace.org.ua/uploads/images/10563/c7a8a135ce307bb402d425b3088d59b8.png

Подякували: cheappi3861