I'm creating my own SDDM theme. During development, I noticed that userModel.lastUser contains an empty string in test mode. I checked on other SDDM themes - the same thing. In normal mode everything is ok. How can I fix this?
Did everything in accordance with the official documentation: https://github.com/sddm/sddm/wiki/Theming
Fragment of my code:
Item {
id: root
signal selected(var userName)
property string userName: userModel.lastUser
property string currentIconPath: usersList.currentItem.iconPath
property string currentUserName: usersList.currentItem.userName
ListView {
id: usersList
model: userModel
delegate: Text {
id: userItem
visible: false
text: model.name
function select() {
selected(name)
usersList.currentIndex = index
currentIconPath = icon
currentUserName = name
}
Component.onCompleted: {
if (name === userModel.lastUser) {
userItem.select()
}
console.log(userModel.lastUser)
//userItem.select()
}
}
}
...
I did the following small tweaks to your application:
I eliminated lastUser - I couldn't find meaning in this property
I update currentUserName and currentIconPath when it is selected, this part I kept
I rewrote the selection to be based on reading and writing currentIndex. The advantage of using currentIndex, is the ListView control has built-in support for Key_Up and Key_Down key presses as long as the ListView control is the current focused control
I introduced an onClicked handler so that the currentIndex gets updated and that the keyboard focus is reasserted
It wasn't clear why your delegate was an invisible Text, I replaced it with Frame with an ItemDelegate because I can (1) supply an icon, (2) change the color
I rewrote Component.onCompleted to initialize currentIndex to the last item in the list model because it appears that there appears to be a need to initialize focus on the last item. The Component.onCompleted was moved from the delegate to the ListView. This is because when it was on the delegate it would have fired EVERY time the delegate got rendered. Imagine the impact of this when you were to scroll through long list. The last visible item isn't necessarily the last item on the list
import QtQuick
import QtQuick.Controls
Page {
signal selected()
property alias currentIndex: usersList.currentIndex
property var currentUser: currentIndex >= 0 && currentIndex < userModel.count ? userModel.get(currentIndex) : null
property string currentIconPath: currentUser ? currentUser.iconPath : ""
property string currentUserName: currentUser ? currentUser.userName : ""
ListView {
id: usersList
anchors.fill: parent
model: userModel
delegate: Frame {
width: ListView.view.width
property bool isCurrentItem: ListView.isCurrentItem
background: Rectangle {
color: isCurrentItem ? "steelblue" : "#eee"
border.color: "grey"
}
ItemDelegate {
id: userItem
width: parent.width
icon.source: model.iconPath
icon.color: isCurrentItem ? "white" : "grey"
palette.text: isCurrentItem ? "white" : "black"
text: model.userName
onClicked: {
usersList.currentIndex = index;
usersList.forceActiveFocus();
selected();
}
}
}
Component.onCompleted: currentIndex = model.count - 1
}
ListModel {
id: userModel
ListElement { userName: "Bill Gates"; iconPath: "smile-32.svg" }
ListElement { userName: "Steve Jobs"; iconPath: "user-32.svg" }
ListElement { userName: "Jeff Bezos"; iconPath: "smile-32.svg" }
}
footer: Frame {
Text {
text: "currentIndex: " + currentIndex + " currentUserName: " + JSON.stringify(currentUserName) + " currentIconPath: " + JSON.stringify(currentIconPath) + " "
}
}
}
//smile-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 29.8A13.8 13.8 0 1 1 29.8 16 13.815 13.815 0 0 1 16 29.8zm0-26.6A12.8 12.8 0 1 0 28.8 16 12.815 12.815 0 0 0 16 3.2zm-4.5 10.6a1.2 1.2 0 0 0 .608-.168 1.52 1.52 0 0 0 .464-.43 1.927 1.927 0 0 0 .278-.572 2.234 2.234 0 0 0 0-1.26 1.927 1.927 0 0 0-.278-.571 1.52 1.52 0 0 0-.464-.431 1.185 1.185 0 0 0-1.216 0 1.52 1.52 0 0 0-.464.43 1.927 1.927 0 0 0-.277.572 2.234 2.234 0 0 0 0 1.26 1.927 1.927 0 0 0 .277.571 1.52 1.52 0 0 0 .464.431 1.2 1.2 0 0 0 .608.168zm9.608-.168a1.52 1.52 0 0 0 .464-.43 1.927 1.927 0 0 0 .278-.572 2.234 2.234 0 0 0 0-1.26 1.927 1.927 0 0 0-.278-.571 1.52 1.52 0 0 0-.464-.431 1.185 1.185 0 0 0-1.216 0 1.52 1.52 0 0 0-.464.43 1.927 1.927 0 0 0-.277.572 2.234 2.234 0 0 0 0 1.26 1.927 1.927 0 0 0 .277.571 1.52 1.52 0 0 0 .464.431 1.185 1.185 0 0 0 1.216 0zm3.223 5.743l-.926-.379a7.863 7.863 0 0 1-7.39 4.976.166.166 0 0 0-.032 0 7.863 7.863 0 0 1-7.388-4.976l-.926.379a8.846 8.846 0 0 0 8.313 5.597.21.21 0 0 0 .035 0 8.848 8.848 0 0 0 8.314-5.597z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
//user-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19.5 15h-7A6.508 6.508 0 0 0 6 21.5V29h20v-7.5a6.508 6.508 0 0 0-6.5-6.5zM25 28H7v-6.5a5.506 5.506 0 0 1 5.5-5.5h7a5.506 5.506 0 0 1 5.5 5.5zm-9-14.2A5.8 5.8 0 1 0 10.2 8a5.806 5.806 0 0 0 5.8 5.8zm0-10.633A4.833 4.833 0 1 1 11.167 8 4.839 4.839 0 0 1 16 3.167z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
You can Try it Online!
Related
There is SVG with two different font types: SymbolMT for the math expressions and Hind-Light for the text.
Both fonts are defined in #font-face section in SVG.
The font for the math expression looks fine but the font for the text is not the same as Hind-Light.
SVGs are embeded in a web page which is using the same font "Hind-Light".
here is fiddle example: https://jsfiddle.net/gde58zw9/
An idea how to fix that font for the text ?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="161.501px" height="64.485px" viewBox="0 0 161.501 64.485" enable-background="new 0 0 161.501 64.485" xml:space="preserve">
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'Hind-Light';
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABA') format('woff2'),
font-weight: 300;
font-style: normal;
font-display: swap;
}
]]>
The 'Hind Light' is now correctly embedded in your jsfiddle example.
You can also reduce the filesize of the base64 chunk by defining a subset in the transfonter UI.
But you still see an error message for the 'Symbol MT'.
Unfortunately it's nearly impossible to create a usable subset for embedding since the Symbol MT has a custom character encoding "MS Windows Symbol" (at least the windows version.
Regular fonts set the summation/sigma) symbol at:
∑ = ∑ regular font
∑ =  Symbol MT
(Data retrieved with fontdrop)
Using a desktop application, the Symbol MT encoding gets converted/remapped.
When exporting the svg - the <text> element uses the regular encoding ∑.
Since 'Symbol MT' doesn't have this codepoint – you see the 'Times New Roman' summation symbol as fallback, which is noticably bigger.
<span class="times">∑</span> <span class="symbol"></span>
<style>
body{
font-size:10vw;
}
.symbol{
font-family:Symbol;
}
.times{
font-family:'Times New Roman', serif
}
</style>
Workarounds
You could base64 encode the original truetype font without any conversion and change the summation symbol to  – not very convenient.
Working codepen.
Alternative: Install all used fonts ('Hind Light') locally so they are avaible in all aplications.
Open your svg in your editor (Inkscape, Adobe Illustrator etc.).
Apply the fonts to your text elements.
Convert all text to paths.
Actually, this might quite often produce smaller files than embedding font subsets.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.5 64.48">
<path d="M63.89 8.19h-.6V4.91c0-.38-.1-.68-.29-.88-.2-.2-.45-.3-.77-.3-.4 0-.75.15-1.05.46-.29.31-.44.73-.44 1.26v2.74h-.6V3.23h.6v.85c.31-.62.83-.93 1.58-.93.48 0 .86.15 1.14.44.29.29.43.67.43 1.13v3.47zm93.88 8.75h-3.98v-.54c2.09-1.6 3.13-2.93 3.13-3.99 0-.44-.13-.78-.38-1.01s-.59-.35-1.01-.35c-.49 0-.99.19-1.51.57v-.61a2.4 2.4 0 0 1 2.94-.04c.39.32.59.8.59 1.4 0 1.13-.97 2.47-2.91 4.02h3.13v.55zM11.96 20.47h-1.83v6.04h-.61v-6.04H7.7v-.56h4.25v.56zm26 4.77c0 .41-.14.74-.43.97-.28.24-.67.36-1.17.36-.6 0-1.08-.1-1.45-.29v-.62c.44.25.91.37 1.41.37.33 0 .58-.07.76-.21s.26-.32.26-.54c0-.26-.09-.46-.27-.61s-.47-.3-.89-.46c-.4-.16-.71-.34-.95-.55-.23-.21-.35-.5-.35-.86 0-.4.15-.72.44-.95.29-.24.66-.36 1.11-.36.53 0 .95.08 1.23.22v.6a2.46 2.46 0 0 0-1.24-.26c-.29 0-.51.07-.68.2a.63.63 0 0 0-.25.52c0 .13.02.24.07.34.05.1.13.19.25.27a8.47 8.47 0 0 0 .72.36c.46.18.81.38 1.05.6.26.23.38.52.38.9zm1.72-5.57c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12c.12-.01.22.03.3.12zm.01 6.84h-.6v-4.96h.6v4.96zm38.21-6.84c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12c.12-.01.21.03.3.12zm0 6.84h-.6v-4.96h.6v4.96zm24.84-1.27c0 .41-.14.74-.42.97-.28.24-.67.36-1.17.36-.6 0-1.08-.1-1.45-.29v-.62c.44.25.91.37 1.41.37.33 0 .59-.07.76-.21a.67.67 0 0 0 .26-.54.75.75 0 0 0-.27-.61c-.18-.14-.47-.3-.88-.46-.4-.16-.71-.34-.95-.55-.23-.21-.35-.5-.35-.86 0-.4.15-.72.44-.95.29-.24.66-.36 1.11-.36.54 0 .95.08 1.23.22v.6a2.46 2.46 0 0 0-1.24-.26c-.29 0-.51.07-.68.2s-.25.31-.25.52c0 .13.02.24.07.34.05.1.13.19.25.27a8.47 8.47 0 0 0 .72.36c.46.18.81.38 1.05.6.23.23.36.52.36.9zm4.63 1.02c-.39.2-.85.29-1.37.29a2.4 2.4 0 0 1-1.79-.69 2.44 2.44 0 0 1-.69-1.81c0-.8.2-1.42.61-1.88s.93-.68 1.58-.68c.61 0 1.09.2 1.45.6.36.4.54.96.54 1.68 0 .22-.01.4-.04.53h-3.5c.05.55.24.97.57 1.26.33.29.77.44 1.32.44a2.4 2.4 0 0 0 1.34-.33v.59zm-1.69-4.21c-.42 0-.77.15-1.05.44-.28.29-.44.71-.49 1.26h2.93v-.22c0-.45-.13-.81-.38-1.08s-.59-.4-1.01-.4zm27.28 4.46h-.6v-5.74l-1.44.9V21l1.44-.88h.6v6.39zm21.52 0h-.67l1.63-2.55-1.54-2.42h.7l1.21 1.96 1.2-1.96h.7l-1.55 2.43 1.66 2.54h-.71l-1.3-2.08-1.33 2.08zM57.65 29.7c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12.4.4 0 0 1 .3.12zm0 6.84h-.6v-4.96h.6v4.96zm9.38 0h-.6V30.8l-1.43.9v-.67l1.44-.88h.6v6.39zM3.42 18.97H1.99v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99H6.05l-2.37-3.85-.26.01zm-.07-4.83H1.99v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.78-2.06-2.33-2.06zm27.31 4.83h-1.43v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.26.01zm-.07-4.83h-1.36v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.78-2.06-2.33-2.06zm42.25 4.83h-1.43v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.26.01zm-.07-4.83h-1.36v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43 0-1.38-.78-2.06-2.33-2.06zm22.65 4.83H94v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.27.01zm-.07-4.83H94v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.79-2.06-2.34-2.06zm57.85 8.66h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63.41.42.62.96.62 1.62v4.95zM7.73 57.96h-.87v-4.41H1.99v4.41h-.87v-9.44h.87v4.23h4.87v-4.23h.87v9.44zm3-9.79c.12.12.18.26.18.43s-.06.31-.18.42c-.12.11-.26.17-.43.17s-.3-.06-.42-.18c-.11-.11-.17-.25-.17-.42s.06-.31.17-.43c.11-.12.25-.17.42-.17s.31.06.43.18zm.01 9.79h-.86v-7.1h.85v7.1zm7.52 0h-.86v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm7.71 0h-.85v-1.04a2.44 2.44 0 0 1-2.2 1.15c-.95 0-1.69-.35-2.23-1.04-.53-.7-.8-1.54-.8-2.54 0-1.1.28-2 .85-2.7s1.3-1.04 2.2-1.04c.92 0 1.65.39 2.17 1.18v-3.86h.85v9.89zm-5.18-3.46c0 .81.2 1.47.6 1.99.4.51.9.77 1.5.77.61 0 1.13-.22 1.57-.67.44-.44.66-1.18.66-2.22 0-.52-.07-.98-.22-1.37a2.06 2.06 0 0 0-1.25-1.31 1.93 1.93 0 0 0-2.25.63c-.4.51-.61 1.24-.61 2.18zm11.61 3.46h-.85v-9.9h.85v9.9zm3.08-9.79c.12.12.18.26.18.43s-.06.31-.18.42c-.12.11-.26.17-.43.17s-.31-.06-.42-.17c-.11-.11-.17-.25-.17-.42s.06-.31.17-.43c.11-.12.25-.17.42-.17s.32.05.43.17zm.01 9.79h-.85v-7.1h.85v7.1zm7.63-.55c0 1.07-.29 1.88-.87 2.42-.58.54-1.33.8-2.24.8-.81 0-1.5-.13-2.07-.41v-.84c.58.29 1.25.43 2 .43.71 0 1.27-.19 1.69-.58.42-.39.63-1 .63-1.83v-.92a2.3 2.3 0 0 1-2.13 1.3c-.82 0-1.52-.3-2.09-.91a3.46 3.46 0 0 1-.86-2.46c0-1.06.26-1.94.79-2.63s1.22-1.04 2.08-1.04a2.3 2.3 0 0 1 2.21 1.36v-1.25h.85v6.56zm-5.04-3.03c0 .85.21 1.5.64 1.94s.91.66 1.43.66a2.1 2.1 0 0 0 1.46-.62c.44-.42.66-1.05.66-1.91 0-.98-.21-1.71-.63-2.18a1.87 1.87 0 0 0-2.98.07 3.35 3.35 0 0 0-.58 2.04zm12.35 3.58h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-9.9h.85v4.02c.43-.89 1.18-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm5.47-.2c-.27.18-.58.27-.94.27-1.34 0-2.02-.69-2.02-2.07v-4.37h-1.16v-.73h1.16v-1.78h.87v1.78h2.03v.73h-2.03V56c0 .81.38 1.22 1.13 1.22.37 0 .69-.11.95-.32v.86zm7.06.2h-.86v-8.22l-2.06 1.29v-.97l2.06-1.26h.85v9.16zm6.89 0h-.84v-2.3h-4.24v-.77l3.67-6.09h1.41v6.09h1.41v.77h-1.41v2.3zm-4.2-3.07h3.36v-5.6l-3.36 5.6zm11.14 5.87h-.85v-9.9h.85v1.04a2.44 2.44 0 0 1 2.2-1.15c.95 0 1.69.35 2.23 1.04.53.7.8 1.54.8 2.54 0 1.1-.29 2-.85 2.7a2.7 2.7 0 0 1-2.2 1.04c-.92 0-1.65-.39-2.17-1.18v3.87zm0-6.31c0 .52.07.98.22 1.36a2.16 2.16 0 0 0 1.25 1.31 1.93 1.93 0 0 0 2.25-.63c.41-.51.62-1.23.62-2.18 0-.81-.2-1.47-.6-1.99-.4-.51-.9-.77-1.5-.77-.61 0-1.13.22-1.57.67-.45.45-.67 1.19-.67 2.23zm10.41 3.31c-.27.18-.58.27-.94.27-1.34 0-2.02-.69-2.02-2.07v-4.37h-1.16v-.73h1.16v-1.78h.87v1.78h2.03v.73h-2.03V56c0 .81.38 1.22 1.13 1.22.37 0 .69-.11.95-.32v.86zm10.21.2h-.85v-1.27c-.37.92-1.12 1.37-2.25 1.37a2.2 2.2 0 0 1-1.64-.62 2.23 2.23 0 0 1-.61-1.64v-4.93h.85v4.69c0 .54.14.96.43 1.25s.66.43 1.13.43a1.9 1.9 0 0 0 1.52-.67c.39-.45.58-1.03.58-1.75v-3.95h.85v7.09zm7.49 0h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm7.74 0h-.85v-1.04a2.44 2.44 0 0 1-2.2 1.15c-.95 0-1.69-.35-2.23-1.04-.53-.7-.8-1.54-.8-2.54 0-1.1.28-2 .85-2.7a2.7 2.7 0 0 1 2.2-1.04c.92 0 1.65.39 2.17 1.18v-3.86h.85v9.89zm-5.18-3.46c0 .81.2 1.47.6 1.99.4.51.9.77 1.5.77s1.13-.22 1.57-.67c.44-.44.66-1.18.66-2.22 0-.52-.07-.98-.22-1.37a2.06 2.06 0 0 0-1.25-1.31 1.93 1.93 0 0 0-2.25.63c-.4.51-.61 1.24-.61 2.18zm16.1 1.02c0 .82-.28 1.45-.83 1.88-.55.43-1.26.65-2.12.65-.97 0-1.8-.21-2.48-.62v-.97a4.43 4.43 0 0 0 2.43.74c.66 0 1.18-.14 1.55-.43.37-.29.55-.71.55-1.25 0-.41-.14-.74-.42-1s-.69-.5-1.22-.74l-.49-.22-.53-.23-.48-.24a3.1 3.1 0 0 1-.47-.29l-.37-.34a1.3 1.3 0 0 1-.32-.42 2.63 2.63 0 0 1-.26-1.11c0-.79.29-1.41.85-1.86a3.3 3.3 0 0 1 2.09-.66c.78 0 1.44.14 1.96.42v.97a3.99 3.99 0 0 0-1.94-.53c-.63 0-1.13.15-1.5.44-.37.29-.56.68-.56 1.17 0 .25.05.48.15.67.1.2.26.38.5.54a6.17 6.17 0 0 0 1.4.74l.74.33c.17.08.38.2.64.37s.46.33.6.5a2.44 2.44 0 0 1 .53 1.49zm4.87 2.26a4.27 4.27 0 0 1-1.26 1.99 2.7 2.7 0 0 1-1.65.55c-.19 0-.36-.02-.53-.07v-.85c.17.05.33.07.48.07 1 0 1.69-.57 2.09-1.71l-2.9-6.9h.98l.96 2.38 1.37 3.42c.06-.21.47-1.35 1.22-3.42l.87-2.38h.95l-2.58 6.92zm13.19.18h-.85v-4.69c0-1.13-.49-1.69-1.48-1.69-.48 0-.92.22-1.29.67a2.67 2.67 0 0 0-.57 1.79v3.92h-.85v-4.69c0-1.13-.5-1.69-1.48-1.69-.49 0-.92.22-1.29.67a2.67 2.67 0 0 0-.57 1.79v3.92h-.85v-7.1h.85v1.16a2.04 2.04 0 0 1 1.99-1.27c1.14 0 1.84.47 2.1 1.4.44-.93 1.14-1.4 2.1-1.4.75 0 1.3.21 1.67.62.36.42.54.96.54 1.63v4.96zm3.03 0h-.85v-9.9h.85v3.86a2.49 2.49 0 0 1 2.17-1.18c.9 0 1.63.35 2.2 1.04s.85 1.59.85 2.7c0 1-.27 1.85-.8 2.54a2.62 2.62 0 0 1-2.23 1.04c-.97 0-1.7-.38-2.2-1.15v1.05zm0-3.58c0 1.04.22 1.78.66 2.22s.96.67 1.57.67 1.11-.26 1.5-.77c.4-.51.59-1.18.59-1.99a3.4 3.4 0 0 0-.62-2.18 1.92 1.92 0 0 0-2.25-.63 2.12 2.12 0 0 0-1.25 1.31c-.13.39-.2.84-.2 1.37zm13.11.07c0 1.05-.3 1.92-.89 2.61a3.05 3.05 0 0 1-2.44 1.03c-1 0-1.79-.34-2.38-1.04a3.86 3.86 0 0 1-.88-2.6c0-1.04.3-1.91.91-2.62a2.95 2.95 0 0 1 2.35-1.06c1.05 0 1.87.35 2.46 1.04.58.69.87 1.57.87 2.64zm-5.7 0c0 .77.22 1.44.65 2 .43.55 1.01.83 1.71.83.78 0 1.38-.27 1.8-.82.43-.55.64-1.22.64-2.01 0-.82-.2-1.5-.6-2.05-.4-.55-1.01-.82-1.83-.82-.74 0-1.32.28-1.74.84a3.27 3.27 0 0 0-.63 2.03zm8.32 3.51h-.85v-9.9h.85v9.9zM58.95 32.91h5.01v.46h-5.01v-.46zm0 1.79h5.01v.47h-5.01v-.47zm-41.7-17.08h7.18v.66h-7.18v-.66zm0 2.55h7.18v.68h-7.18v-.68zm30.35-4.54h.67v3.27h3.25v.66h-3.25v3.25h-.67v-3.25h-3.26v-.66h3.26v-3.27zm38.22 0h.67v3.27h3.25v.66h-3.25v3.25h-.67v-3.25h-3.26v-.66h3.26v-3.27zm26.53.59 2.54 2.53 2.54-2.53.47.46-2.54 2.55 2.54 2.53-.47.48-2.54-2.54-2.54 2.54-.48-.48 2.54-2.54-2.54-2.53.48-.47zm13.58.32v6.07c.35-.07.63-.2.85-.38s.4-.5.56-.95.29-1.25.39-2.41c.09-.96.24-1.62.45-1.98.21-.36.57-.54 1.08-.54.17 0 .43.04.77.12v.23c-.2 0-.34.03-.44.1-.13.1-.24.27-.32.52s-.16.7-.23 1.36a8.6 8.6 0 0 1-.45 2.32 3.6 3.6 0 0 1-1.58 1.7c-.32.16-.68.26-1.08.3v2.83h-.75V23a3.31 3.31 0 0 1-2.67-1.99c-.17-.41-.32-1.19-.45-2.34-.08-.69-.15-1.16-.23-1.39s-.18-.4-.31-.49c-.08-.06-.23-.09-.44-.09v-.23c.38-.08.64-.12.79-.12a1.31 1.31 0 0 1 1.26.92c.11.31.2.84.27 1.6.09 1.13.21 1.92.37 2.37.16.46.34.78.56.97.21.19.5.32.86.4v-6.07h.74zm11.6 2.33h7.18v.68h-7.18v-.68zm-69.05 9.25H55.02v-.37l6.86-8.52-6.86-8.38v-.38h13.1l.28 3.46h-.41c-.11-.94-.37-1.62-.79-2.02a2.46 2.46 0 0 0-1.76-.61h-7.59l5.76 7.04-6.45 7.97h8.39c.48 0 1-.09 1.57-.28.39-.13.71-.36.97-.69.26-.33.47-.85.64-1.55l.41.07-.66 4.26z"/>
</svg>
Drawback: you can't select any text, since every text was converted to <path> elements.
So I have a width and height of container and viewBox, can't change these things
Only thing I can do is send this component a path
For now the SVG is now adjusting in it's container due to the size being too big
Can I change the aspect ratio / size of SVG via the path ?
Sample Code
<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>
Again goal to achieve: make SVG to fit this viewBox and width height.
No you can't. You'd have to change the SVG path to fit the box, but you can't "resize" per-se.
I manually resized your path to fit the box.
<path fill="#3E3E3E" d="M1.2 3.3H4a1 1 0 1 1 0 1.8H.6a1 1 0 0 1-.9-.9V0a1 1 0 0 1 1.9 0v1.4A11 11 0 0 1 20 8.6c0 .5-.4.9-1 .9a1 1 0 0 1-.9-1A9.2 9.2 0 0 0 12.3 1a9.2 9.2 0 0 0-10 2.3ZM17.4 16.1A11 11 0 0 1-1 8.9c0-.5.4-.9 1-.9.4 0 .8.4.9 1a9.2 9.2 0 0 0 5.8 7.5 9.2 9.2 0 0 0 10-2.3h-2.6a1 1 0 1 1 0-1.8h4.3a1 1 0 0 1 .9.9v4.2a1 1 0 0 1-1.9 0v-1.4Z"></path>
How I did it:
I used svgomg with precision: 1, to simplify the path to a point where it was small enough for me to actually manually edit.
Then I split it into two separate paths (top and bottom arrows) (using
the Z as the path separator), wrapped them in <g transform="translate(x, y)"></g> until it looked right, copied the
remainder back into svgomg where it is smart enough to convert the
transforms into a single path.
You can set the transform attribute of the <path> (using scale and translate):
document.querySelector('path').setAttribute('transform', 'scale(0.9)')
See the snippet for example:
document.querySelector('path').setAttribute('transform', 'scale(0.9)')
<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>
I have vote(like) on my code on C# (ASP .NET Core)
Now I want , when I click on heart , the heart changes its color.
How do I do just with CSS (Not jQuery) with checking of If Condition
this is my Code on View :
<div>
<form method="post" asp-controller="Article" asp-action="AddArticleVote" asp-route-id="#article.Id">
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="32.044" height="32" viewBox=" 0 32.044 32">
<path id="prefix__comment-heart" d="M18.016 12.16a4.912 4.912 0 0 0-5.664.848 4.8 4.8 0 0 0 0 6.784L16.88 24.4a1.6 1.6 0 0 0 2.272 0l4.528-4.528a4.8 4.8 0 0 0 0-6.784 4.912 4.912 0 0 0-5.664-.928zm3.392 5.376l-3.392 3.392-3.392-3.392a1.6 1.6 0 1 1 2.256-2.272 1.6 1.6 0 0 0 2.272 0 1.6 1.6 0 1 1 2.256 2.272zM18.016 2a16 16 0 0 0-16 16 15.823 15.823 0 0 0 3.617 10.127l-3.2 3.2A1.56 1.56 0 0 0 3.617 34h14.4a16 16 0 1 0 0-32zm0 28.8H7.473l1.488-1.488a1.6 1.6 0 0 0 0-2.256 12.8 12.8 0 1 1 9.055 3.744z" transform="translate(-1.972 -2)" style="fill: #ccc"></path>
</svg>
</button>
</form>
</div>
You can target the path element and add :active styles:
path#prefix__comment-heart:active {
fill: blue;
}
For this to work remove the style attribute inline fill styles as this takes precedence over the fill styles shown above.
If you want to keep the greyish fill color you have now for when the button is not being clicked you can aditionally target path#prefix__comment-heart without the :active suffix.
I have the below code that I eventually want to webscrape and analyse.
My code has been running for almost an hour and it doesn't seem to pull through from this site.
import bs4 as bs
from urllib.request import urlopen as ureq
my_url2 = 'https://www.dreamteamfc.com/g/#tournament/stats-centre-stats'
ureq(my_url2)
The data you're looking for are loaded from other URL via Ajax (so BeautifulSoup doesn't see it). Also, use requests module for fetching the pages/Json data - it handles compression, redirects etc. automatically.
To load the data, use following example:
import json
import requests
url = "https://nuk-data.s3.eu-west-1.amazonaws.com/json/players_tournament.json"
data = requests.get(url).json()
# uncomment this to print all data:
# print(json.dumps(data, indent=4))
# print some data to screen:
for player in data:
print(
"{:<15} {:<15} {}".format(
player["first_name"], player["last_name"], player["cost"]
)
)
Prints:
Cristiano Ronaldo 7000000
Goran Pandev 1000000
David Marshall 2000000
Jesús Navas 3000000
Kasper Schmeichel 3000000
Sergio Ramos 5000000
Raúl Albiol 2000000
Giorgio Chiellini 3500000
...and so on.
EDIT: To load the data into a dataframe, you can use .json_normalize
import json
import requests
import pandas as pd
url = "https://nuk-data.s3.eu-west-1.amazonaws.com/json/players_tournament.json"
data = requests.get(url).json()
df = pd.json_normalize(data)
print(df)
df.to_csv("data.csv", index=None)
Prints:
id first_name last_name squad_id cost status positions locked injury_type injury_duration suspension_length cname stats.round_rank stats.season_rank stats.games_played stats.total_points stats.avg_points stats.high_score stats.low_score stats.last_3_avg stats.last_5_avg stats.selections stats.owned_by stats.MIN stats.SMR stats.SMB stats.GS stats.ASS stats.YC stats.RC stats.PM stats.PS stats.CS stats.GC stats.star_man_awards stats.7_plus_ratings stats.goals stats.assists stats.cards stats.clean_sheets tournament_stats.star_man_awards tournament_stats.7_plus_ratings tournament_stats.goals tournament_stats.assists tournament_stats.cards tournament_stats.clean_sheets
0 14937 Cristiano Ronaldo 359 7000000 playing [4] 0 None None None None 0 0 9 0 0 0 0 0 0 22760 41.3 764 0 0 15 0 1 0 0 0 7 0 0 0 0 0 0 0 0 0 0 0 0 0
1 15061 Goran Pandev 504 1000000 playing [4] 0 None None None None 0 0 0 0 0 0 0 0 0 50 0.1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
2 15144 David Marshall 115 2000000 playing [1] 0 None None None None 0 0 0 0 0 0 0 0 0 166 0.3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
3 17740 Jesús Navas 118 3000000 playing [3] 0 None None None None 0 0 0 0 0 0 0 0 0 154 0.3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
4 17745 Kasper Schmeichel 369 3000000 playing [1] 0 None None None None 0 0 9 0 0 0 0 0 0 3261 5.9 810 0 0 0 0 1 0 0 0 4 0 0 0 0 0 0 0 0 0 0 0 0 0
5 17861 Sergio Ramos 118 5000000 playing [2] 0 None None None None 0 0 9 0 0 0 0 0 0 14647 26.6 712 0 0 1 0 1 0 0 0 6 0 0 0 0 0 0 0 0 0 0 0 0 0
...and so on.
And saves data.csv (screenshot from LibreOffice):
I would like to use a handful of Eva Icons in my project because the package is quite large. From my understanding we can't install icons individually.
Instead, I've downloaded the svgs and registered the svg pack in the app.component which works:
export class AppComponent implements OnInit {
constructor(private iconsLibrary: NbIconLibraries) {
this.iconsLibrary.registerSvgPack('eva-icons', {
'arrow-back': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="arrow-back"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23 1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2z"/></g></g></svg>',
'book-open-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="book-open"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M20.62 4.22a1 1 0 0 0-.84-.2L12 5.77 4.22 4A1 1 0 0 0 3 5v12.2a1 1 0 0 0 .78 1l8 1.8h.44l8-1.8a1 1 0 0 0 .78-1V5a1 1 0 0 0-.38-.78zM5 6.25l6 1.35v10.15L5 16.4zM19 16.4l-6 1.35V7.6l6-1.35z"/></g></g></svg>',
'camera': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="camera"><rect width="24" height="24" opacity="0"/><path d="M19 7h-3V5.5A2.5 2.5 0 0 0 13.5 3h-3A2.5 2.5 0 0 0 8 5.5V7H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-9-1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h-4zM20 18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1z"/><path d="M12 10.5a3.5 3.5 0 1 0 3.5 3.5 3.5 3.5 0 0 0-3.5-3.5zm0 5a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5z"/></g></g></svg>',
'menu-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="menu"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><rect x="3" y="11" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="16" width="18" height="2" rx=".95" ry=".95"/><rect x="3" y="6" width="18" height="2" rx=".95" ry=".95"/></g></g></svg>',
'edit-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>',
'teams': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="people"><rect width="24" height="24" opacity="0"/><path d="M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M17 13a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0-4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"/><path d="M17 14a5 5 0 0 0-3.06 1.05A7 7 0 0 0 2 20a1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 6.9 6.9 0 0 0-.86-3.35A3 3 0 0 1 20 19a1 1 0 0 0 2 0 5 5 0 0 0-5-5z"/></g></g></svg>',
});
this.iconsLibrary.setDefaultPack('eva-icons');
}
However the nb status is no longer automatically changing the icon colours like before. Please can you advise on how to do this efficiently?
Alternative is to extract the SVG of only the icons you want (from any icon set);
wrap that in a modern W3C Custom Element/WebComponent that recreates the SVG dynamically,
allowing you to alter presentation any way you want, with attributes, properties or CSS properties.
https://iconmeister.github.io/ now has 5000+ icons you can pick from
You then have No dependencies, No external SVG files
As a test I did all your 6 EVA icons: https://jsfiddle.net/WebComponents/5ct36swL/
(and cleaned up the bloated SVG from EVA icons)
Usage:
<style>
svg-icon {
display: block;
background: grey;
--svg-icon-stroke:darkslategray;
}
</style>
<div id=toolBar class=icons>
<svg-icon is="arrow-back" stroke=green></svg-icon>
<svg-icon is="book-open-outline" fill=red></svg-icon>
<svg-icon is="camera" opacity=.2 stroke=red></svg-icon>
<svg-icon is="menu-outline" fill=gold></svg-icon>
<svg-icon is="edit-outline" rotate=45 fill=blue stroke=white></svg-icon>
<svg-icon is="teams" scale=.5></svg-icon>
</div>
Output:
Should work fine in Angular, Vue or Svelte. For React you have to jump through some hoops...
as React only for 71% supports this modern W3C standard (https://custom-elements-everywhere.com/)
(my) Related StackOverflow answers: Custom Elements and SVG