Каким образом меняется размер clipPath?

#html #svg #inkscape #сss3

                    
Господа, столкнулся я значит с такой задачей:


Есть слайдер, все фото которые в него попадают(180px/180px), должны быть обрезаны
по контуру.




Для фигурной обрезки было решено использовать SVG маску.
В программе Inkeskape, создал холст 180/180 и набросал контур. 
Далее нашел в "И-нете" статьи о свойстве clip-path: url(...);. 
Скопировал из svg файла "путь", перенес все это дело в HTML песочницу и обрезал фотографию.
Результат - маленький контур (примерно 100*100px) обрезает большую фотографию.
Песочница на codepen

Подскажите, как увеличить этот контур относительно фотографии и можно ли это делать
через css?
    

Ответы

Ответ 1

У вас фотография имеет размер 600х800px Поэтому и полигон в
Inkscape для clipPath нужно было выбрать точно такого же размера.
И тогда маску не нужно было бы уменьшать, увеличивать.
Второй путь - загружаете фотографию в Inkscape и прямо
сверху фотографии рисуете патч, который будет использован в качестве
clipPath Но это на будущее.
А сейчас можно пойти третьим путём.    


Для увеличения размера клипа используем команду transform="scale(N)" Подбираете вручную.
После увеличение clipPath сдвинется вправо и вниз.    

Для позиционирования используете команду - transform="translate(X Y)" 

В итоге формула для увеличения, позиционирования выглядит так: 

transform="scale(3.3) translate(-11.7 -10)"    


Внизу полный код, сравните его со своим исходным кодом и подкорректируйте немного
CSS, так он был немного изменен мною для более точного позиционирования.   



HTML, BODY {
    height: 100%;
}

BODY {
    background: 
        linear-gradient( #EEE 1px, transparent 2px),
        linear-gradient( to right, #EEE 1px, transparent 2px);
    background-size: 1em 1em;
}

.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 300px;
    text-align: center;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    background-color: gray;
    }

.catMask {
    position: absolute;
    top: 10px;
    left: calc(50% - 50px);
    width:250px;
    height: auto;
    
-webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
}
.maskItem {
    width: 100%;
    overflow: hidden;
}



 


   




   

Как растянуть svg маску по высоте?

#html #css #svg #inkscape

Изображение обрезается, как растянуть svg маску по высоте?  

Оригинал



.item {
  height: 500px;
}

.svg-mask {
  width: 100%;
  overflow: hidden;
}

.image-with-mask {
  width: 100%;
  height: auto;
  mask: url(#mask-wrapper);
}

  






    

Ответы

Ответ 1

Решил добавить новый ответ, чтобы не смешивать два разных подхода. 

В первом ответе я обращал ваше внимание, что браузеры неодинаково рассчитывают позиционирование.
Поэтому в хроме была лишняя обрезка.    

Второй момент - в Firefox'e были заметны ступеньки, так происходит при сильном увеличении
растровой картинки.  Этот эффект возник потому-что вы натягивали маску шириной 200px
на картинку шириной 1500px. 
Чтобы избавиться от этих двух нежелательных дефектов сделаем следующее.  

Решение:  


Перерисуем маску сравнимую по размерам с изображением


Открываем в векторном редакторе нужное изображение, 

но не встраиваем его, а связываем, то есть в файле на выходе будет ссылка на это
изображение: 

  

Рисуем путь, который обеспечивает нужную форму маски:        

        


Сохраняем файл в векторном редакторе и забираем из него патч, который будет основой
нашей    маски.     


Пишем код, реализующий маску


  
  
   


Белый прямоугольник в маске пропускает сквозь себя всё изображение, а черный полукруглый
патч, вырезает нужную форму.  









Изображение адаптивно к разному размеру экрана.     

Если необходимо будет, как-то изменить размеры изображения, то изменяйте width height
в процентах шапке svg       

width="100%" height="100%" viewBox="0 0 1500 843"


Ответ 2

Вот так, это выглядит в Firefox`е: 

    

Всё дело в том, что Chrome и Firefox несколько по разному относятся к позиционированию
маски, клиппатча относительно окна браузера. 
Чтобы смотрелось одинаково во всех браузерах, я убрал стили, которые излишне влияют
на позиционирование   и добавил команду: 

preserveAspectRatio="xMinYMin meet"






  







Работает во всех браузерах и даже в IE.

Как сделать вечную привязку (snap) в Inkscape?

#svg #inkscape

концы линии привязаны к центрам кругов. Как делать так, чтобы при смещении кругов
смещалась и соединяющая их центры линия?

UPD (после первого ответа). Круги смещаются по отдельности: один круг смещается,
и конец линии, привязанный к нему, смещается вместе с ним. Другой конец линии вместе
с другим кругом остаётся на месте.
    

Ответы

Ответ 1

В Inkscape с версии 0.91 или 0.92 есть инструмент для рисования соединительных линий
(Ctrl+F2). Попробуйте с его помощью, правда, соединятся не центры окружностей, а их
края. Но есть трюк: в центре каждой окружности сделайте очень маленькую окружность
такого же цвета или с прозрачной заливкой. Соедините маленькие окружности соединительной
линией. Сгруппируйте попарно маленькие окружности с большими. Теперь, визуально, линия
соединяет центры окружностей и движется вместе с каждой из них.


Ответ 2

Для этого надо объединить два круга и линию в одну группу

Рисуете в редакторе два круга, заполняете из цветом, далее рисуете линию соединяющую
центры кругов. 

   

Далее нажав SHIFT делаете выделение всех объектов и объединяете их в группу нажав
на иконку (показана красной стрелкой) или просто нажимаете CTRL+G    

   

Всё объекты одно целое и их можно перемещать по холсту, как одно целое. 



Ниже код svg этих фигур 

Не отображается svg в браузере

#svg #svg_animation #inkscape

Сделал картинку в Inkscape. Для того, чтобы сделать анимацию рукописного ввода. Пытаюсь
вставить на сайт, но она не отображается.
Пытался просто код вставлять   , и через img,
ни так, ни так не выходит. Ошибок в консоли нет.

Вот код картинки.




В редакторе картинка выглядит так:

 
    

Ответы

Ответ 1

Примеры анимации букв


Анимация вертикального появления букв.


Реализует анимацию вертикальное движение маски 


      
       
       
     










Анимация горизонтального появления букв   



      
       
       
       
     










Летающие буквы с горизонтальной парковкой  


Анимация достигается изменением позиции X, Y для каждой буквы по отдельности 















Летающие буквы с вертикальной парковкой   








Ответ 2

Разбираться вручную в коде, который получен из векторного редактора, очень нелегко. 
Проще и быстрее попробовать сделать самостоятельно нужный текст и это довольно просто. 

В векторном редакторе можно создать любой текст, с выбором любого шрифта. 
При этом каждая буква будет иметь свой path, что даёт богатые возможности для оформления,
-  каждой букве можно назначать свой цвет, назначать любую трансформацию: смещения,
масштабирования, поворота.
Также появляется возможность анимировать каждую букву или слово целиком.

Техника создания path для каждой буквы 


Загружаете в векторный редактор пустой SVG файл с нужным размером
холста SVG.  

Как правильно скрыть часть изображения?

#html #css #css3 #svg #inkscape

Имеется изображение в формате , как скрыть обрезать угол изображения?

А если изображение будете задано в качестве bg фона?


    

Ответы

Ответ 1

Решение SVG

С помощью техники,- использование mask svg,  можно сделать очень сложные вырезы,
которые трудно повторить в css 

Для этого понадобится минимальные навыки работы в векторном редакторе. 


Загружаем нужную картинку в векторный редактор (Inkscape) и рисуем path который будет
служить границей вырезанной части.   

     
Рисуем кривую с помощью инструмента -


Далее в меню Inkscape выбираем Контур / оконтурить
обводку   
Сохраняем файл SVG и в любом текстовом редакторе копируем из файла формулу кривой





Вот эта кривая линия и будет границей вырезания части изображения.  

Ниже код с маской:   





    



Ответ 2

Вам может подойти свойство mask-image

Пример: http://jsfiddle.net/fbB3P/254/

Документация: https://developer.mozilla.org/ru/docs/Web/CSS/mask-image

Поддержка    браузерами: https://caniuse.com/#search=mask-image


Ответ 3

body {
  background: linear-gradient(to right, blue, red);
  padding: 0 20%;
}

section, div {
  overflow: hidden;
}

div {
  padding-top: 100%;
  margin-top: -100%;
  transform: skew(0deg, -10deg);
}

img {
  display: block;
  max-width: 100%;
  transform: skew(0deg, 10deg);
}

  

    
  



Ответ 4

Я бы пошел путем наименьшего сопротивления и просто отредактировал изображение с
созданием прозрачного слоя.(Тут нужно отказаться от формата jpg)


Ответ 5

Если правильно вас понял. То в этом случае, лучше img обернуть в div и div-блоку
задать размеры width и height меньшие, чем у img и добавить свойство для div overflow:
hidden. Например:
Размеры img (width: 300px, height: 300px)
Делаем:


  



Изображение обрежется на 50px справа и снизу.

Для фона тоже самое.

Логика работы последовательности трансформаций в transform

#svg #inkscape

До конца не понимаю как работают трансформации в SVG.








Почему scale сделали не вокруг центра фигуры, а от начала координат, ведь теперь
фигура не просто увеличилась но и сдвинулась... Тогда вопрос как её увеличить вокруг
центра?








В данном случае я фигуру первым действием translate(-20,-20) возвращаю в начало координат,
как я думаю, и при масштабирование фигура должна остаться у координат 0,0, но она всё-равно
сдвинута остаётся, почему?








В чём разница этих двух вариантов? Правильно ли я понимаю что преобразования выполняются
с конца?

Как правильно повернуть фигуру на 45 градусов и увеличить в два раза относительно
её центра?



    

Ответы

Ответ 1

Я немного изменил  исходный код автора, чтобы не учитывать смещение относительно
начала координат, которое задает viewBox="-100 -100 400 400", чтобы в чистом виде посмотреть,
как влияет команда scale(2) на позиционирование фигур. 








Если левый верхний угол прямоугольника не совпадает с началом координат, в вашем
случае  
    
    
  
   
    
    



    

Пример масштабирования вокруг точки      

Допустим у нас есть точка с координатами 50,50px вокруг которой мы будем масштабировать
прямоугольник, таким образом, чтобы он увеличивался, без смешения от этого центра.
Механизм центрирования тот же. Считается насколько увеличилось расстояние от начала
координат до центра фигуры и вычитается размер, чтобы вернуть фигуру на прежнюю позицию.   

SVG-графика (.NET, C#)

#c_sharp #xml #svg #inkscape

Имеется xml-документ с несколькими элементами  rect и line. 
Возможно ли получить доступ к редактированию любого из этих элементов при открытии
соответствующего svg-файла в графических редакторах, "знающих" SVG?
    

Ответы

Ответ 1

Вы просто попробуйте скачать Inkscape с официального сайта
И  открыть файл, затем редактируйте его по вашим потребностям.
Уроков по Inscape достаточно много, да и без них интуитивно понятно,
что делать, тем более интерфейс редактора на русском.  
Далее сохраняете файл в нужном вам формате. В файле очень много служебной информации,
его можно использовать и так, но лучше оптимизировать.  
Для оптимизации есть очень хороший редактор онлайн SVG-Editor
Всё бесплатно, пользуйтесь.  


Upd по комментариям автора вопроса

Пример анимации простейших фигур SVG (Рисование спирали с одновременным движением
шарика)    






    

Пояснения как это сделать  

Учитесь на примерах, правьте их, пишите свои, самые элементарные

Как масштабировать размеры иконок svg

#html #css #svg #icon #inkscape

Вот есть код:







    



    



    



    


















При размерах 256 пикселей размер svg иконки не 256 пикселей, а где-то ~140
При указании 128, тоже не 128 и т.д.
Почему так происходит?
 Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются
с размерами, а почему эта не работает как надо?! 
    

Ответы

Ответ 1

Масштаб определяется соотношением viewport / viewBox, где viewport это width="X"
height="Y"  

В вашем примере масштабирование применяется последовательно  несколько раз.
Очень легко запутаться. Поэтому я максимально упрощу ваш пример и поэтапно буду усложнять
до практического применения    


Ниже пример, где применяется масштабирование только один раз в шапке
svg файла


viewport / viewBox = 100/100=1. Масштаб будет - 1:1 То есть как нарисовано в векторном
редакторе, так и будет отражаться на дисплее 

      

На скрине векторного редактора видно, что физически иконка имеет габариты - 56.6
х 56.6px  


Теперь запускаем этот же файл в браузере. И для наглядности я добавил
красный прямоугольник,  через стили в шапке файла, который показывает
границы SVG файла.

style="border:1px solid red;"